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PENDAHULUAN 


Game edukasi sangat menarik untuk dikembangkan. Ada beberapa kelebihan dari 
game edukasi dibandingkan dengan metode edukasi konvensional. Salah satu 
kelebihan utama game edukasi adalah pada visualisasi dari permasalahan nyata. 
Massachussets Insitute of Technology (MIT) berhasil membuktikan bahwa game 
sangat berguna untuk meningkatkan logika dan pemahaman pemain terhadap 
suatumasalah melalui proyek game yang dinamai Scratch. 

Berdasarkan hasil penelitian sebelumnya, tidak diragukan lagi bahwa game edukasi 
dapat menunjang proses pendidikan [1,2]. Game edukasi unggul dalam beberapa aspek 
jika dibandingkan dengan metode pembelajaran konvensional. Salah satu keunggulan 
yang signifikan adalah adanya animasi yang dapat meningkatkan daya ingat sehingga 
anak dapat menyimpan materi pelajaran dalam waktu yang lebih lama dibandingkan 
dengan metode pengajaran konvensional [3]. 

Game edukasi berbasis simulasi didesain untuk mensimulasikan permasalahan yang 
ada sehingga diperoleh esensi atau ilmu yang dapat digunakan untuk 
menyelesaikan permasalahan tersebut. Game simulasi dengan tujuan edukasi ini dapat 
digunakan sebagai salah satu media edukasi yang memiliki pola pembelajaran 
learning by doing. Berdasarkan pola yang dimiliki oleh game tersebut, pemain 
dituntut untuk belajar sehingga dapat menyelesaikan permasalahan yang ada. Status 
game, instruksi, dan tools yang disediakan oleh game akan membimbing pemain 
secara aktif untuk menggali informasi sehingga dapat memperkaya pengetahuan 
danstrategi saat bermain. 

Game juga merupakan konsumsi dari semua kalangan tidak hanya anak balita saja 
bahkan di era gadjet begini bahkan yang tua-tua juga masih senang dalam permainan 
game. Dan game yang akan dikupas pada buku ini adalah game yang menggunakan 
Software Contruct 2. Karena Software ini mudah digunakan tanpa harus menggunakan 
coding sehingga cocok untuk semua kalangan yang tidak menguasai pemrograman 
HTML yang menggunakan klik-klik saja kita bisa membuat game edukasi sederhana. 
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Bab 1 

PENGENALAN GAME 


1.1 PENGERTIAN GAME 

Game berasal dari bahasa inggris yang berarti permainan. Dalam 
setiap game terdapat peraturan yang berbeda - beda untuk memulai 
permainannya sehingga membuat jenis game semakin bervariasi. Karena 
salah satu fungsi game sebagai penghilang stress atau rasa jenuh maka 
hampir setiap orang senang bermain game baik anak kecil, remaja maupun 
dewasa, mungkin hanya berbeda dari jenis game yang dimainkannya saja. 

Game sendiri mempunyai dampak positif dan negatif pada kehidupan 
yang memainkannya. Contoh dampak positif, misalnya: sebagai penghilang 
stres karena lelah bekerja seharian, mungkin bermain game tepat untuk 
menghilangkan penat tersebut. Lalu bagi anak - anak sebagai media untuk 
menambah kecerdasan otak dan daya tanggap, dan masih banyak lagi 
dampak positif yang lainnya. Contoh dampak negatif, misalnya: karena 
terlalu sering bermain game lupa untuk melakukan pekerjaan yang lainnya, 
sehingga membuat pekerjaan lain menjadi tertunda. Lalu jika bermain game 
di komputer terlalu lama akan merusak mata, dan lain sebagainya. 

1.2 DEFINISI GAME MENURUT PARA AHLI 

Di bawah ini merupakan sebagian definisi dan pengertian dari game 
menurut beberapa ahli: 

> JOHN C BECK & MITCHELL WADE 

Game adalah penarik perhatian yang telah terbukti. Game adalah 
lingkungan pelatihan yang baik bagi dunia nyata dalam organisasi yang 
menuntut pemecahan masalah secara kolaborasi. 

> IVAN C. SIBERO 

Game merupakan aplikasi yang paling banyak digunakan dan dinikmati 
para pengguna media elektronik saat ini. 

> FAUZIA 

Game merupakan suatu bentuk hiburan yang seringkali dijadikan 
sebagai penyegar pikiran dari rasa penat yang disebabkan oleh 
aktivitas dan rutinitas kita 

> SAMUEL HENRY 

Game merupakan bagian tak terpisahkan dari keseharian anak, 
sedangkan sebagian orang tua menuding game sebagai penyebab nilai 
anak turun, anak tak mampu bersosialisasi, dan tindakan kekerasan 
yang dilakukan anak 

> ANDIKSUSILO 

Game adalah salah satu candu yang susah dihilangkan, bahkan ada 
yang mengatakan bahwa candu game online setara dengan narkoba 






> JOHN NAISBITT 

Game merupakan sistem partisipatoris dinamis karena game memiliki 
tingkat penceritaan yang tidak dimiliki film 

> ALBERT EINSTEIN 

Game adalah bentuk investigasi paling tinggi 

> WIJAYA ARIYANA & DENIARIFIANTO 

Game merupakan salah satu kebutuhan yang menjadi masalah besar 
bagi pengguna komputer, karena untuk dapat memainkan game 
dengan nyaman, semua komponen komputernya harus memiliki 
kualitas yang baik, terutama VGA card-nya. 


"Kesimpulan dari semua definisi di atas bahwa GAME merupakan suatu alat 
yang sangat berpengaruh bagi kehidupan dan perkembangan teknologi 
yang ada. Game merupakan sebagian yang tidak terpisahkan bagi 
kehidupan seorang anak khususnya, merupakan hal yang dapat 
menyebabkan kecanduan kepada orang yang memainkannya, serta dapat 
menjadi alat refreshing penghilang penat dari segala rutinitas keseharian 
yang telah kita lalui." 

1.3 JENIS-JENIS GAME 

Jenis game mungkin sangat banyak dan bervariasi, dari media untuk 
memainkannya yang berbeda , cara bermain , jumlah pemain, tapi disini 
yang akan saya jelaskan adalah jenis game berdasarkan tipe game yang 
biasanya dimainkan di handphone dan komputer. 

A. ACTION G AM ES 

Biasanya meliputi tantangan fisik, teka-teki (puzzle), balapan, dan 
beberapa konflik lainnya. Dapat juga meliputi masalah ekonomi 
sederhana, seperti mengumpulkan benda-benda. 

B. Real Time Strategy (RTS) 

Adalah game yang melibatkan masalah strategi, taktik, dan logika. 
Contoh game jenis ini adalah Age of Empire, WarCraft, dan sebagainya. 

C. Role Playing Games (RPG) 

Kebanyakan game jenis ini melibatkan masalah taktik, logika, dan 
eksplorasi atau penjelajahan. Dan juga kadang meliputi teka-teki dan 
masalah ekonomi karena pada game ini biasanya melibatkan 
pengumpulan barang-barang rampasan dan menjualnya untuk 
mendapatkan senjata yang lebih baik. Contoh dari game ini adalah Final 
Fantasy, Ragnarok, Lord of The Rings, dan sebagainya. 

D. Real World Simulation 

Meliputi permainan olahraga dan simulasi masalah kendaraan termasuk 
kendaraan militer. Games ini kebanyakan melibatkan masalah fisik dan 
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taktik, tetapi tidak masalah eksplorasi, ekonomi dan konseptual. 
Contohnya seperti adalah game Championship Manager. 

E. Construction and Management 

Seperti game Roller CosterTycoon dan The Sims. Pada dasarnya adalah 
masalah ekonomi dan konseptual. Game ini jarang yang melibatkan 
konflik dan eksplorasi, dan hampir tidak pernah meliputi tantangan fisik. 

F. Adventure games 

Mengutamakan masalah eksplorasi dan pemecahan teka-teki. Namun 
terkadang meliputi masalah konseptual, dan tantangan fisik namun 
sangat jarang. 

G. Puzzle games 

Ditujukan untuk memecahkan suatu masalah tertentu. Hampir 
semua semua tantangan disini menyangkut masalah logika yang 
biasanya dibatasi oleh waktu. 

H. SI ide scrolling games 

pada jenis game ini karakter dapat bergerak ke samping diikuti dengan 
gerakan background. Contoh game tipe seperti ini adalah Super Mario, 
Metal Slug, dan sebagainya. 

1.4 SEJARAH GAME 

Sejarah erkembangan Game dapat dilihat dari perkembangan berikut ini: 

A. VIDEO GAME 

Video game berawal dari pengembangan tabung sinar katoda 
yang terdapat dalam sistem peluru pertahanan pada akhir Perang 
Dunia II. Program-program ini kemudian diadaptasi ke dalam bentuk 
permainan sederhana. 

Pada 1947 Thomas Toliver Goldsmith Jr dan Estle Ray 
Mann menciptakan permainan simulator rudal Cathode Ray Tube 
Device Amusement. Permainan ini terinspirasi dari kecanggihan 
radar Perang Dunia II. Inilah game elektronik pertama yang 
tercatat dalam sejarah.Meski memiliki unsur permainan, game ini 
tak popular. Penggunaannya terbatas untuk kepentingan simulasi 
latihan militer. Tampilannya juga masih sederhana; belum berwarna 
dan hanya mengeluarkan suara "tat-tit-tut". Baru pada 1970-an 
game elektronik bias dinikmati di rumah-rumah. Ralph Baer, seorang 
Jerman berdarah Yahudi, mendesain video game rumahan pertama 
dengan prototipe bernama Brown Box. Baer menjual idenya ke 
perusahaan Magnafox. Prototipe Baer kemudian dirilis ke pasar 
dengan nama Magnafox Odyssey. Produk ini berisi 16 game built-in 
yang dapat diganti-ganti dengan menggunakan sebuah switch. 
Ralph Baer kemudian tercatat sebagai "bapak game 






dunia".Popularitas video game kian menanjak ketika pengusaha Nolan 
Bushnell mendesain mesin game koin (arcade) pertama di dunia 
berna macomputer space -di Indonesia popular dengan sebutan Ding- 
Dong. Bushnell kemudian membuat game simulasi ping- pong yang 
diberi nama Pong. Game ini laku keras di pasaran. Hampir setiap 
keluarga di Amerika bermimpi bias membeli game ini. Di berbagai 
taman hiburan dan kafe, Pong bahkan harus dibongkar setiap 24 
jam sekali untuk mengeluarkan koin yang berjejalan. "Selama 
puluhan tahun, orang Amerika lebih banyak menghabiskan 
uangnya untuk sistem home video game dan di tempat-tempat 
permainan Ding-Dong daripada untuk menonton film atau musik - 
jumlah totalnya mencapai lebih dari sebelas milyar dolar," tulis Roger 
Fidler dalam Mediamorfosis Belum puas dengan Pong, Bushnell 
meluncurkan Atari 2600, video game pertama yang berbasis konsol, 
lalu Atari 7800 yang disebut-sebut sebagai pelopor penggunaan 
joystick. 

Tapi semua kejayaan itu tak bertahan lama. Pasar jemu. 
Angka penjualan merosot. Sebagian perusahaan video game Amerika 
beralih ke bisnis komputer lain atau bangkrut. Sebagian besar kaum 
eksekutif dan analis industri melihat hal ini sebagai pertanda bahwa 
video game hanyalah sebuah keisengan.Pada saat itulah muncul 
pendatang baru dari Jepang, Nintendo, yang menggebrak pasar video 
game dunia dengan merilis Famicom. Konsol ini menampilkan gambar 
dan animasi resolusi tinggi untuk kali pertama. Setelah mendapat 
sambutan hangat di Jepang, Famicom melakukan ekspansi pasar ke 
Amerika. "Pada 1989, Nintendo mengendalikan 80 persen pasar 
video game Amerika. 

Bahkan pada 1990-an, satu dari setiap lima rumah 
tangga di Amerika memiliki perangkat permainan Nintendo," tulis 
Fidler.Pada tahun-tahun berikutnya, Nintendo berhasil menikmati 
posisi istimewa di pasar video game. Pesaing-pesaingnya tak mampu 
membendungnya. Sega sempat member perlawanan sengit melalui 
Sonic The Hedhog. Sayang, perusahaan ini lebih sering kalah cepat 
dalam pengembangan game ketimbang Nintendo. Penantang serius 
Nintendo muncul pada 1994. Sony, perusahaan elektronik 
terkemuka, merilis Sony Playstation (PSX) konsol berbasis CD. PSX 
terjual hingga ratusan juta unit. Sony bahkan kian merajalela melalui 
Playstation 2, yang sudah berbasis DVD. Nintendo, Sega, dan 
Microsoft, yang mengeluarkan produk tergres mereka, belum mampu 
mengalahkannya.Tapi perang belum berakhir. November 2005 
Microsoft datang dengan Xbox 360, konsol generasi terkini yang 
memanfaatkan media HD-DVD. Dengan segudang fitur istimewa, Xbox 
360 menarik banyak penggemar game. Tak mau kalah, Nintendo 
meluncurkan terobosannya, Nintendo Wii. Dengan inovasi pada stik 
kontrol mereka yang "motion sensitive", Nintendo kembali 






mengambil-alih pasar video game. Sony, sekalipun mengeluarkan 
Playstation 3, sudah terlambat. 

Tinggallah kini persaingan antara Microsoft dan Nintendo. 
Tapi pesaing-pesaing baru akan bermunculan. Salah satunya Apple, 
sebuah perusahaan notebook terkemuka yang sukses dengan iPhone 
dan iPod. Ada rumor mereka berencana terjun ke industry konsol 
video game. Pihak Nintendo sudah mewaspadai Apple sebagai musuh 
masa depan mereka. 

B. GAME ONLINE 

Membicarakan sebuah game tentu tak lebih seru tanpa mebicarakan 
perkembangan dari game online yang ada sekarang ini. Untuk pertama 
saya akan menjelaskan apa arti serta pengertian dari game online 
tersebut. 

1. PENGERTIAN DARI GAME ONLINE 

Game Online atau sering disebut Online Games adalah sebuah 
permainan (games) yang dimainkan di dalam suatu jaringan (baik 
LAN maupun Internet). 

2. SEJARAH DAN PERKEMBANGAN GAME ONLINE 
Perkembangan game online sendiri tidak lepas juga dari 
perkembangan teknologi komputer dan jaringan Computer itu 
sendiri. Meledaknya game online sendiri merupakan cerminan 
dari pesatnya jaringan Computer yang dahulunya berskala kecil 
(small local network) sampai menjadi internet dan terus 
berkembang sampai sekarang. Games Online saat ini tidaklah sama 
seperti ketika games online diperkenalkan untuk pertama kalinya. 

Pada saat muncul pertama kalinya tahun 1960, Computer hanya 
bisa dipakai untuk 2 orang saja untuk bermain game. Lalu 
muncullah Computer dengan kemampuan time-sharing sehingga 
pemain yang bisa memainkan game tersebut bisa lebih banyak 
dan tidak harus berada di suatu ruangan yang sama (Multiplayer 
Games). 

Lalu pada tahun 1970 ketika muncul jaringan Computer 
berbasis paket (packet based Computer networking), jaringan 
Computer tidak hanya sebatas LAN saja tetapi sudah mencakup 
WAN dan menjadi Internet. Game online pertama kali muncul 
kebanyakan adalah game-game simulasi perang ataupun pesawat 
yang dipakai untuk kepentingan militer yang akhirnya dilepas lalu 
dikomersialkan, game-game ini kemudian menginspirasi game- 
game yang lain muncul dan berkembang. Pada tahun 2001 adalah 
puncak dari demam dotcom, sehingga penyebaran informasi 
mengenai game online semakin cepat 






3. PERKEMBANGAN GAMES ONLINE DI INDONESIA 

Menurut Ligagame Indonesia(ligagames.com), game online muncul 
di Indonesia pada tahun 2001, dimulai dengan masuknya Nexia 
Online. Game online yang beredar di Indonesia sendiri cukup 
beragam, mulai dari yang bergenre action, sport, maupun RPG (role- 
playing game). Tercatat lebih dari 20 judul game online yang 
beredar di Indonesia. Ini menandakan betapa besarnya antuiasme 
para gamer di Indonesia dan juga besarnya pangsa pasar games di 
Indonesia. 

1.5 DAMPAK PENGGUNAAN GAME 

Segala sesuatu pasti memiliki dampak yang positif ataupun yang negatif 
bagi seseorang yang masuk ke dalamnya. Maka dari itu, saya akan 
membahas sedikit tentang dampak baik dan buruknya dari permaian game 
itu sendiri. 

A. DAMPAK POSITIF 

1. Melatih fisik 

Ada banyak jenis permainan video game. Salah satunya konsol 
komputer yang memerlukan beberapa aktivitas dan gerakan fisik. 
Misalnya menari, bermain gitar, atau bermain drum. Orangtua bisa 
memilihkan metode permainan bergerak tersebut untuk anak-anak 
mereka. Ini akan lebih baik dibandingkan mereka sekadar bermain 
video game dengan cara duduk di sofa sepanjang hari. 

2. Kebugaran dan nutrisi 

Banyak jenis video gim yang menggabungkan kebugaran, nutrisi, 
dan hidup sehat untuk menjadi tujuan utama permainan. Video 
game yang dimaksud akan menyimulasi olahraga outdoor yang 
menjadi alternatif latihan di luar ruangan. Misalnya video 
game tinju, lari, tenis, dan sebagainya. Ini akan memancing 
permainan penurunan berat badan dan mempertahankan gaya 
hidup sehat. 

3. Melatih ketangkasan 

Bermain game bisa juga meningkatkan ketangkasan anak anda. 
Ada fungsi kerja, bermain, sekaligus berolahraga. Ada banyak 
permainan dalam video game yang memancing tingkat koordinasi 
dan kejelian mata anak anda. 

4. Keterampilan social 

Kurangnya keterampilan sosial dan kemampuan berinteraksi 
dengan orang lain secara teratur dapat merusak perkembangan 
anak. Bahkan, anak-anak berpotensi depresi. Anak-anak yang 






pemalu biasanya kurang percaya diri ketika bersosialisasi dengan 
rekan-rekannya. Mungkin, membina hubungan sosial antaranak 
saat mereka bermain video game lebih tepat. Dengan permainan 
online (online game) misalnya, anak-anak anda bisa mengenal lebih 
banyak orang dan menambah jumlah temannya. 

5. Meningkatkan kemampuan belajar 

Kompleksitas dari video game memberikan anak anda kesempatan 
untuk meningkatkan keterampilan kognitif dan penalarannya. 
Video game telah berkembang ke titik dimana pengguna harus 
mengambil kendali dan berpikir untuk diri mereka sendiri. Pemain 
juga perlu mengambil alih kendali dan memasukkan perintah 
sederhana melalui pengontrol permainan video. Seringkah, video 
game membutuhkan pemain yang pintar memecahkan teka-teki. 
Mereka harus sabar dan kreatif agar mereka bisa maju ke babak 
permainan berikutnya. 

6. Meningkatkan sportivitas 

Sportif dan fair play adalah nilai-nilai umum yang dikembangkan 
dalam kompetisi pemuda. Video game juga menawarkan hal yang 
sama. Dia mengajarkan nilai-nilai keteraturan. Pada permainan 
online (online game) misalnya, masing-masing pemain akan 
bersaing secara teratur satu sama lainnya. 

7. Mengurangi stress 

Tekanan belajar yang padat dan kegiatan ekstrakurikuler yang 
banyak seringkali membuat anak anda stres. Video game 
menawarkan anak anda outlet untuk mengurangi tingkat stres 
mereka. Dengan bermain game, maka sang anak akan terbebas 
dari segala tekanan yang mereka hadapi di dunia luar. Untuk 
menghilangkan stresnya, anak anda bisa membenamkan dirinya 
dalam asyiknya bermain video game sementara waktu. 

8. Membentuk tim kerja 

Kerjasama tim yang kuat banyak terbina dalam permainan video 
game. Permainan online misalnya, membutuhkan pemain yang 
efektif berkomunikasi dengan tim mereka. Sementara itu, mereka 
terus melakukan tugas-tugas yang diembankan kepada mereka 
demi meraih kemenangan. 

9. Mengalihkan rasa sakit 

Anda terkadang berurusan dengan rasa sakit fisik dan juga 
emosional. Video game berfungsi untuk mengalihkan sementara 
masalah itu. Video game akan menawarkan kesempatan bagi anda 
untuk melarikan diri dari dunia luar. Mereka yang menderita 






penyakit tertentu, bisa memainkan beberapa video game untuk 
mengalihkan rasa sakitnya. 

10. Membuat bahagia 

Salah satu kenyataan adalah bermain video game itu membuat 
seseorang merasa bahagia. Namun, hal terpenting adalah 
memoderasi jumlah waktu yang ideal untuk dihabiskan bermain 
video game. Sebab, ada kemungkinan video game bisa 
menyebabkan anda atau anak anda kecanduan. Anda harus ingat 
untuk menempatkan batas waktu yang wajar untuk bermain video 
game. Berikan contoh yang bagus untuk anak-anak anda. 

B. DAMPAK NEGATIF 

1. Kurang tidur 

Anak sudah menghabiskan sebagian besar waktunya untuk belajar 
di sekolah dan beraktivitas. Namun, mereka ingin tetap bermain 
video game. Sehingga, banyak anak mengorbankan waktu berharga 
mereka untuk tidur dan menggunakannya untuk bermain video 
game. Pecandu video game yang kurang tidur maka dapat 
membahayakan kesehatannya. 

2. Hidup kotor 

Ketika seseorang yang mencandu karena terlibat dalam permainan 
video game, maka ia mulai mengabaikan segala hal terkait 
kebersihan pribadi. Seseorang akan malas mandi, sehingga 
menyebabkannya memiliki banyak jerawat, hingga penyakit gigi. 

3. Isolasi diri 

Seseorang yang bermain video game berlebihan menyebabkan 
orang itu memilih mengisolasi dirinya dari dunia luar, la cenderung 
mengasingkan diri dari teman dan keluarga. Orang itulebih asyik 
dengan permainannya. Ketidakpedualian seseorang terhadap 
kebersihan pribadi hanyalah awal perpindahan orang itu dari dunia 
nyata dan menjauh dari kehidupan sosial. Baginya, interaksi 
dengan tokoh-tokoh hero video game lebih berarti dibandingkan 
interaksi dengan siapapun. Orang yang sudah kecanduan video 
game mudah mengabaikan pekerjaan, sekolah, teman-teman, dan 
keluarganya, la menolak melakukan aktivitas apapun begitu 
bangun pagi kecuali bermain video game. 

4. Depresi 

Meskipun pecandu video game tak menyadari awal dirinya 
despresi, namun perlahan penyakit ini akan meresap cepat ketika 
dia merasa diperbudak oleh kecanduannya sendiri. Hanya ketika 
seseorang berhenti bermain, kemudian berpikir tentang waktu- 






waktu yang telah dia lewatkan begitu saja, baru orang itu 
menyesalinya dan berujung pada depresi. 

5. Stres 

Stres dari kecanduan video game biasanya disebabkan oleh 
sejumlah skenario. Pertama, seseorang menjadi begitu terobsesi 
dengan video game. Kegagalan mereka memenangkan level-level 
pada video game menyebabkannya stres berlebihan. Kedua, 
seseorang menyadari bahwa hidupnya kacau karena video game. 
Ini menyebabkan stres juga. Satu-satunya cara orang untuk 
menghindari tipe stres kedua ini adalah dengan tetap bermain 
video game dan melupakan waktu. 

6. Arthritis dan Carpal Tunnel Syndrome 

Kedua penyakit di atas adalah gangguan fisik. Video game bias 
menyebabkan masalah pada jempol seseorang di kemudian hari. 
Tubuhnya juga rentan penyakit osteoarthritis. Sedangkan carpal 
tunnel syndrome adalah tekanan pada saraf di pergelangan tangan 
anda. 

7. Makan kurang sehat 

Ketika pecandu video game terlalu sibuk untuk bermain, maka ia 
akan jarang mandi, dan jarang tidur. Ini juga berdampak pola 
makan mereka menjadi tak sehat. Pecandu video game selanjutnya 
akan beralih ke makanan cepat saji dan memilih memakan 
makanan beku dan instan. Mereka justru memperbanyak minuman 
soda dan minuman energi dengan harapan mereka bisa bermain 
dalam kondisi prima. Ini menyebabkan pecandu video game 
mudah terserang obesitas, diabetes, dan kondisi kesehatan serius. 

8. Perilaku agresif 

Video game menjadi ajang melepaskan agresivitas dalam diri 
seseorang. Bentuknya adalah ambisi menguasai permainan dan 
memenangkan permainan. Bagi mereka yang sudah kecanduan, 
sikap agresif yang berlebihan ini pada akhirnya juga tanpa mereka 
sadari mereka praktekkan dalam kehidupan nyata. Ini yang 
menyebabkan seseorang menampilkan pola-pola prilaku agresif 
yang tak biasa. Misalnya, marah besar jika aktivitas bermain video 
game mereka diganggu. 

9. Gaya hidup buruk 

Pecandu video gama akan mencurahkan semua waktunya untuk 
aktif bermain video game. Dia hanya akan duduk atau berbaring 
dalam praktik kesehariannya. Kebiasaan makannya juga buruk, dan 






kebiasaan tidurnya kacau. Ini menyebabkan mereka mudah terkena 
stroke, penyakit jantung, dan hipertensi. 

10. Berbohong 

Berbohong adalah salah satu cara pecandu video game untuk 
menutupi perilaku abnormalnya. Ini adalah salah satu tanda 
seseorang telah kecanduan penuh oleh video game. Mereka 
akhirnya berbohong pada dirinya sendiri dan menyangkal bahwa 
mereka tak memiliki masalah sama sekali. 
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BAB 2 

MACAM-MACAM SOFTWARE PEMBUAT GAME 



2.1 GAME MAKER 8.1 OR STUDIO 



Game maker 8 atau studio adalah Software pembuat game yang hampir paling 
mudah dengan integritas Drag and Drop object . yeps, tentu saja Software ini 
dapat membuat game dengan dnd tanpa butuh pemrograman, Software ini juga 
di lengkapi dengan sprite editor, path, object game, dan tentu saja Room. 

Game maker di built-in dengan game maker languague. Yang dapat membantu 
anda dengan script. Dan dengan Software ini anda juga bisa membuat game 
android, ios, html 5 bahkan export ke ps2 ataupun ps3 tapi itu yang versi studio. 


2.2 RPG MAKER 











RPG maker adalah Software pembuat game RPG atau juga role playing 


game. dengan Software engine ini anda dapat membuat game dengan waktu yang 
lebih singkat. Software ini juga lebih memfokuskan kepada jalan cerita, maps, item, dan 
hero2 nya. Bagi yang belum pro dalam mengusai komputer mungkin akan kesulitan 
saat menginstal Software ini, tapi bagaimanapun Software ini akan membuat anda 
puas akan fasilitas nya. Bagi yang ingin membuat game RPG ini adalah pilihan Terbaik. 

2.3 GAME SALAD 


GameSalad 



Game salad juga merupakan Software pembuat game termudah dan juga bisa 
membuat game pc, android, bahkan ios. Software ini memiliki interface yang bisa 
Drag n Drop. Visual yang unik, dan anda dapat membuat game dengan mudah, 
tentu saja mempunya library yang besar. Untuk versi gratis anda bisa 
mempublikasikan game ini ke web ataupun ios, dan untuk versi pro 
memungkinkan anda untuk menghasilkan uang di playstore. versi pro juga akan 
membuat anda puas akan interface nya. Jika anda ingin membuat game Android 
ataupun IOS Ini adalah pilihannya. 
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2.4 3DRAD ENGINE 


lafiMK» DRW.rfi «mm WMM 

||pnn»ct Ct*d £dt 

M 

■ 

■ 

21 ' 1 

21 

i : 

'"'i :: 

J -- — 



‘ 

/1 * 


3D rad engine adalah Software pembuat game 3d termudah bahkan lebih gilanya . 
anda bisa menjalankan langsung game nya dengan hanya memilih mobil dan 
maps nya. 3d rad hanya mampu membuat game racing. ya seperti game balap lah, 
seperti nfs most wanted, ataupun downhill . engine ini membuat anda bisa 
membuat game 3d tanpa pusing2 akan coding. editor di 3d rad berbasis 
komponen/object yang bisa di kombinasikan dan di setting sendiri. Untuk anda 
yang ingin membuat game 3d racing. ini adalah pilihan terbaik. 

2.5 STENCLY 


nc 


stencyl 


Stencly engine adalah pembuat game terbaik sekaligus termudah untuk platform 
Web , Flash dan Html 5. stencly studio sangat portable dan juga menawarkan 
toolset indah, untuk engine ini juga tidak di perlukan "coding" untuk membuat si 
pembuat game merasa nyaman dan tidak ambil pusing. Software ini juga 
dilengkapi dengan world editor untuk membangun dunia , dan juga actor tool 



SAGUSAGAME 

Satu Guru Satu Game Edukasi 


Halaman 13 











untuk membuat karakter dan NPC. Game2 keluaran stencly juga sangat luar 
biasa. Bagi anda yang ingin membuat game Web platform Pilihan terbaiknya 
adalah Stencly. 

2.6 CLICKTEAM FUSION 2 



Clickteam adalah nama perusahaan perangkat lunak yang berdiri di paris, prancis. 
sedangkan clickteam fusion adalah nama perangkat lunak clickteam. Perangkat 
lunak program yang sangat baik sistem editor acara memastikan pengembang 
dapat dengan cepat membuat game dengan pengetahuan pemrograman 
minimum. 

Pengembang juga dapat mengambil keuntungan dari mesin fisika Box 2D dan 
mempublikasikan game dan aplikasi untuk berbagai platform, termasuk OUYA 
konsol, berkat modul ekspor Android. Setelah membuat aplikasi 2D, semua 
pencipta permainan harus lakukan adalah klik pada Build dan Run untuk membuat 
file APK. Setelah file APK yang dihasilkan, akan diinstal pada perangkat Anda. 


2.7 UNITY 



UNITY adalah sebuah game developing Software. Dengan Software ini, kita bisa 
membuat game 3D yang seru. Jika anda belum memakai unity, maka bersiaplah 
untuk mencobanya, karena game developer ini sangat mudah menggunakannya 
selain bisa untuk build game PC, UNITY juga dapat digunakan untuk 
membangun game console seperti Nintendo Wii, PS3, Xbox 360, juga Ipad, 
Iphone, & android. Namun masing-masing membutuhkan biaya lisensinya sendiri. 
Selain itu juga bisa juga buat web, cuma butuh instali Unity webplayer nya ajah. 
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Unity lebih kurang sama dengan Blender game engine cuma unity lebih ringan dan 
diintegrasi lebih didalm suasana grafik. 

Kelebihan unity yaitu multiple platform, maksudnya banyak platform yang 
diisupport oleh unity, misal Windows, Mac, iPhone, iPad, Android, Nintendo Wii, 
dan juga browser. Untuk browser, kita memerlukan sebuah plugin, yaitu Unity 
Web Player, sama halnya dengan Flash Player pada Browser. Bagi yang ingin 
membuat game 3d ataupun 2d bisa mencoba Software ini. 

2.8 CONTRUCT 2 



Construct 2 adalah salah satu aplikasi pembuatan permainan yang sederhana. 
Dan permainan tersebut dapat dimainkan pada Windows 8, android atau orang 
bisa mendownloadnya di PlayStore jika kita ingin menjual permainan tersebut 
kepada PlayStore dan lain sebagainya. Jika kita menjual permainan yang telah kita 
buat, tentunya akan menghasilkan uang. Dan uang itu tentu milik kita. Untuk 
membuat permainan pada aplikasi Construct 2 ini, tidak gampang dan tidaklah 
sulit, hanya butuh ketekunan , dan akan lebih baik jika ada yang mengajarkan 
membuat game disini juga tidak membutuh kan pemrograman , anda bisa 
mencoba nya jika tidak ingin susah2 membuat game. 

2.9 ADVENTURE MAKER STUDIO 
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adventure yang banyak memakai metode point-and-click dalam bermain. Karena 
tidak menggunakan proses coding yang rumit, tidak heran jika hasil kreasi dari 
aplikasi ini terbilang sederhana. Beberapa obyek telah disertakan sehingga kamu 
tinggal menempatkannya sesuai keinginan. Ingin membuat obyek sendiri? 
Disediakan pula aplikasi penyunting gambar. Kamu juga bisa menambahkan suara 
ataupun musik sebagai latar menggunakan file yang sudah ada atau menciptakan 
konten sendiri memakai Music Composer Editor. 

Aplikasi ini tidak hanya bisa dipakai untuk membuat game berbasis Windows, loh. 
Platform lainnya juga didukung, seperti PSP, iPod touch, dan iPhone. Dan selain 
membuat game, Adventure Maker dapat pula kamu manfaatkan untuk membuat 
presentasi, tutorial interaktif, virtual tour, hingga aplikasi berbasis edukasi 
interaktif. Khusus yang suka buat game yang klik-klik ini pilihan yang bagus. 

Adventure Maker adalah Software untuk membuat game bertema adventure yang 
banyak memakai metode point-and-click dalam bermain. Karena tidak 
menggunakan proses coding yang rumit, tidak heran jika hasil kreasi dari aplikasi 
ini terbilang sederhana. Beberapa obyek telah disertakan sehingga kamu tinggal 
menempatkannya sesuai keinginan. Ingin membuat obyek sendiri? Disediakan 
pula aplikasi penyunting gambar. Kamu juga bisa menambahkan suara ataupun 
musik sebagai latar menggunakan file yang sudah ada atau menciptakan konten 
sendiri memakai Music Composer Editor. 

Aplikasi ini tidak hanya bisa dipakai untuk membuat game berbasis Windows, loh. 
Platform lainnya juga didukung, seperti PSP, iPod touch, dan iPhone. Dan selain 
membuat game, Adventure Maker dapat pula kami hingga aplikasi berbasis 
edukasi interaktif. 
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Bab 3 

SOFTWARE CONTRUCT 2 


3.1 MENGENAL CONSTRUCT 2 

Construct 2 adalah tools pembuat game berbasis HTML5 yang 
dikhususkan untuk platform 2D yang dikembangkan oleh Scirra. Construct 2 
tidak menggunakan bahasa pemrograman khusus, karena semua perintah 
yang digunakan pada game diatur dalam EvenSheet yang terdiri dari Event 
dan Action. 

Seperti pada definisi diatas, Construct 2 tidak menggunakan bahasa 
pemrograman khusus, jadi untuk untuk mengembangkan game dengan 
Construct 2 pengguna tidak perlu mengerti bahasa pemrograman yang 
relatif lebih rumit dan sulit. 

3.2 ALASAN MEMILIH GAME CONSTRUST 2 

Berikut adalah kelebihan Game Construct 2 dibandingkan dengan Software 
game lainnya : 

A. QUICK AND EASY 

Dengan menggunakan Construct 2 membuat game menjadi lebih 
mudah. Construct 2 memiliki antarmuka Ribbon yang cepat dan 
mudah dipahami. Layout editor menyediakan antarmuka what-you- 
see-is-what-you-get untuk mempercepat perancangan game. Sehingga 
apapun yang di lihat dalam desain layout adalah tampilan yang 
didapatkan ketika game dijalankan. 

B. POWERFULL EVENT SYSTEM 

Construct 2 dapat membuat game dengan cara yang mudah dibaca 
secara visual karena tidak perlu menggunakan bahasa pemrograman 
yang rumit dan samar. Construct 2 menyediakan Event Sheet yang 
berisi pernyataan kondisi atau pemicu. Jika kondisi tersebut terpenuhi, 
tindakan atau fungsi dapat dilakukan. 

C. FLEXIBLE BEHAVIORS 

Behaviors menyediakan cara instan untuk menambahkan kemampuan 
objek, mempercepat pembangunan dan meningkatkan produktivitas. 
Misalnya menambahkan Behavior platform pada objek sprite yang 
memungkinkan objek tersebut dapat belari dan melompat. Pengguna 
dapat mengatur pengaturan untuk kecepatan, akselerasi, kekuatan 
melompat, gravitas, dan banyak lagi, sampai kemampuan objek 
tersebut sesuai seperti yang dibutuhkan. 
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D. INSTANT PREVIEW 

Tidak perlu menunggu waktu yang memakan waktu untuk 
mengkompilasi. Permainan akan di preview dan berjalan di jendela 
Browser ketika diuji. Fitur lainnya yang membuat pengujian lebih 
mudah adalah Preview Over Wifi. Hal ini memungkinkan setiap ponsel, 
tablet, laptop, atau PC lain yang terhubung pada LAN/Wifi juga dapat 
langsung melihat preview game. 

E. STUNNING VISUAL EFFECTS 

Ada lebih dari 70 efek berbasis WebGL untuk warp, distort, blend, blur, 
mask, re-color dan lainnya. Pengguna dapat menambahkan ini pada 
objek, layer dan layout untuk efek khusus yang cepat dan menciptakan 
hasil yang luar biasa. Game yang dibuat dengan Construct 2 diharapkan 
dapat membuat pemain mendapatkan pengalaman terbaik dari 
permainan yang dibuat. 

F. MULTIPLATFORM EXPORT 

Construct 2 dapat mempublikasikan game dengan pilihan platform 
yang luas hanya dengan satu project. Game Construct 2 dapat 
diterbitkan pada platform berbasis web seperti Chrome Web Store, 
Facebook, Kongregate, Newgrounds, Firefox Marketplace. Selain itu 
memungkinkan pula untuk melakukan ekspor game ke desktop PC, 
Mac, dan Linux dengan menggunakan Node-Webkit. Selain 
mempublikasikan ke Windows 8 Store atau sebagai aplikasi Windows 
Phone 8. Pengguna dapat pula mengekspor game ke iOS dan Android 
dengan menggunakan CocoonJS, appMobi dan PhoneGap. Dengan 
dukungan platform yang luas pengguna dapat memiliki akses yang luas 
untuk pemain. 

G. EASY EXTENSIBILITY 

Construct 2 hadir dengan lebih dari 20 built-in plugin, lebih dari 20 
behaviors dan lebih dari 70 visual effects. Mulai dari menampilkan text 
dan sprites, sound dan music, input, manipulasi data dan 
penyimpanan, efek partikel, efek pergerakan, dan masih banyak lagi. 
Jika pengguna perlu beberapa fungsi tertentu, Construct 2 memberi 
akses pengguna untuk membuat plugin atau behaviors sendiri 
menggunakan JavaScript SDK. Pengguna juga dapat membuat efek 
visual sendiri dengan menggunakan bahasa GLSL shader. Komunitas 
Construct 2 menghasilkan lebih dari 150 plugin dan behaviors. Plugin ini 
juga dapat ditambahkan untuk permainan yang dibuat. 
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3.3 MENGENAL INTERFACE DALAM CONSTRUCT 2 


A. START PAGE 

Halaman muka adalah halaman yang akan muncul pertama kali pada 
saat kita membuka sebuah program 
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Project Examples 

Space Blaster 
31 Ghost Shooter 
Qr Browse examples 


Recent Projects 

(3 GAME KATAK1 capx 
<3 gameMatik2.capx 
3 membuat animasi 
sprite.capx 
3 Template- 

TopDownShooter.capx 
3 GameMatikl.caproj 
<3 COBA GAME 2.capx 
3 GameBolal.caproj 



Stay up to date 

ODSa 


New to Construct 2? 

Why not try the Beginner's Guide tc 
Construct 2? Also try browsing our 
Online list of all tutorials, or read I 
manual. 


PERSONAL license 

This copy of Construct 2 is I 
crysna rhany ningrum 
(crysna.mail@gmail.com). 



Objects Tilemap 


Ini adalah tampilan awal dari Construct 2. Pada halaman ini tersedia 
link-link yang memungkinkan kita untuk membuat proyek baru, 
melanjutkan proyek yang akhir-akhir ini sedang dikerjakan, melihat 
contoh-contoh proyek, mempelajari manual dan tutorial, dan 
sebagainya. 


B. USER INTERFACE 

Bagian berikut menjelaskan beberapa komponen penting pada user 
interface Construct 2 disertai penjelasan umum dari setiap 
komponennya. 
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C. FILE MENU DAN RIBBON TABS 


d 


» Construct2 


Home 


View 


Events 


Construct 2 menggunakan interface ribbon yang merupakan desain 
toolbar yang dimiliki oleh Office 2007 dan yang terbaru. Tombol biru 
dengan panah ke bawah merupakan file menu, sedangkan di 
sebelahnya adalah tab ribbon yang merupakan tombol-tombol drop- 
down yang memiliki berbagai fungsi untuk melakukan pengaturan pada 
proyek. 

Terdapat juga quick-access toolbar untuk fungsi-fungsi yang paling 
sering digunakan, yaitu save, undo, redo dan preview. Kita dapat 
menambahkan dan menghapus fungsi yang berada pada quick- access 
toolbar ini dengan sesuka hati dengan mengklik tombol panah kecil di 
sebelah kanan. 
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1. File Menu 



File menu dapat diakses dengan mengklik tombol biru di sudut kiri 

atas ribbon. Recent Projects pada sebelah kanannya adalah 

daftar project terbaru yang kita buka. 

> New : Membuka dialog Create New Project unntuk 
membuat project baru. 

> Open : Membuka project yang terdapat di disk komputer kita. 

> Save : Menyimpan project yang sedang kita kerjakan ke 
harddisk. 

> Save As Project : Menyimpan project beserta assetnya 
dalam suatu folder. 

> Save As Single File : Menyimpan project menjadi satu 
file berekstensi .capx. 

> Export project : Mengekspor game kita ke platform 
yang diinginkan. 

> Close Tab : Menutup tab yang sedang dibuka. 

> Close Project : Menutup project yang sedang dibuka. 

Di bawah ini File menu juga terdapat 4 tombol tambahan : 

> Help: Membuka maual Contruct. 

> Preferences : Membuka dialog Preferences untuk pengaturan 
Contruct 2. 

> Exit : Menutup Contruct 2. 
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2. Ribon 

Secara default ribbon tersembunyi hingga kita mengklik salah satu 
tab ribbon. Kita bisa mengatur agar ribbon tampil secara 
permanen dengan mengklik pin button di sudut kanan atas layar. 
Keyboard shortcuts dapat ditemukan dengan mendekatkan 
mouse ke tombol pada ribbon atau dengan mengklik tombol Alt. 

a. The Home Tab 


Home 

View 

Events 
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Undo 
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Online 
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Home tab berisi fungsi-fungsi standar Software pada 
umunya, seperti Cut, Copy, Paste, Undo dan Redo. Tombol 
Delete, Select All, dan Select None memberikan pengaruh 
pada Layout View atau Event Sheet View yang sedang aktif. 
Bagian Preview berisi tombol untuk preview project dan 
tombol untuk ekspor game kita ke platform yang diinginkan. 

b. The View Tab 


f-GD - ”' Home View Events 

2] Status Bar [V] Layer Bar 

E| Properties Bar El Object Bar 

J Project Bar Configurations Bar 

Q Zoom in 
^ Zoom out 

O, Zoom to 100% 

Zoom 

O Snap to grid 

Grid width 32 

Grid height 32 
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Bagian Bars berisi pengaturan untuk menampilkan berbagai 
bar antarmuka pada Construct 2. Bagian Zoom untuk 
memperbesar atau memperkecil Layout View maupun Event 
Sheet. Bagian Layout Grid hanya akan aktif ketika Layout View 
juga aktif. Dengan mengaktifkan Snap to Grid, objek yang kita 
gerakan dan pindahkan akan terikat ke grid yang telah kita 
atur. Theme mengizinkan kita untuk memilih style visual untuk 
antar muka Construct 2 kita. 

c. TheEventsTab 


p GJB"» Home View Events 

Add event ^ Add sub-event ^ Add indude 

Search 

@ Show 'Add action' links 

^ Add condition ^ Add group j/ Add comment 

X Clear search 


^ Add action ^ Add variable (^Disable 



Events 

Search 

Display 


Tab Events hanya akan aktif ketika kita bekerja pada Event 
Sheet View. Jika Layout View yang sedang terbuka, semua 
tombol pada Tab Events tidak akan aktif. Pada tab ini terdapat 
button-button untuk mendukung pembuatan event game kita. 
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d. Layout View 

Layout view merupakan visual editor atau workspace dimana 
kita menempatkan objek-objek untuk membuat game, 
mendesain level dan stage pada game, membuat screen menu, 
dan sebagainya. 

e. ViewTab 

Layout 1 (&) Event sheet 1 


View tab memungkinkan anda untuk mengganti-ganti layout 
dan event sheet yang ingin dikerjakan pada layout view. 

f. Properties Bar 

Properties bar merupakan tempat dimana kita mengatur sifat- 
sifat objek yang diklik. Objek-objek yang dapat diganti 
tersebut diantaranya adalah layout, objek, layer, animasi dan 
sebagainya. 


g. Projects Bar Dan Layers Bar 

Secara default Projects Bar dan Layers Bar diposisikan di sini. 
Project bar berfungsi menampilkan segala sesuatu yang 
terinclude dalam proyek. Sedangkan Layers bar dapat 
digunakan untuk menambahkan layer atau memilih layer 
mana yang aktif. 


h. Project Bar/Layer Bar Tabs 



Projects 


La 


Project Bar/Layer Bar tabs memungkinkan kita untuk 
mengganti antara Projects Bar dan Layers Bar. 


Objects Bar 

Pada bar ini terdapat list objek-objek yang terinclude pada 
proyek game yang sedang dikerjakan. Kita dapat melakukan 
drag and drop objek dari bar ini ke dalam layout untuk 
meletakannya. Selain itu, dengan fungsi klik-kanan kita dapat 
memilih bagaimana objek dalam bar ditampilkan. 
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j. Status Bar 

Pada bagian bawah layar editor terdapat Status Bar yang 
menampilkan : 

> Long-running task yang sedang dikerjakan oleh Construct 
2, seperti mengekspor dan menyimpan proyek. 

> Berapa banyak event yang terdapat pada proyek dan 
perkiraan size file game 

> Layer yang sedang aktif, dimana objek akan diletakan. 

> Koordinat pointer mouse pada layout 

> Zoom level saat ini 

k. Top-Right Buttons 



Tombol atas-kanan memuat tombol-tombol umum pada 
window seperti minimize, maximize, dan close. Selain itu 
terdapat juga tombol Pin Ribbon untuk mengatur apakah tab 
ribbon ingin selalu ditampilkan atau tidak, serta 
tombol About untuk membuka dialog window yang 
menampilkan credits serta informasi mengenai Software 
Construct 2. 

3.4 MEMBUAT FUNGSI DALAM CONSTRUCT 2 

Walaupun Construct 2 adalah tools pembuatan game yang tidak 
mengharuskan kita untuk menguasai programming, namun ada beberapa 
fitur yang biasa digunakan dalam berbagai bahasa pemrograman. Salah 
satu fitur tersebut adalah Function, atau fungsi. Fitur Function ini akan 
mengumpulkan beberapa action dan memberinya suatu nama. Kita bisa 
menggunakan kelompok action tersebut dengan menggunakan 'Call 
function', atau pemanggilan fungsi dengan menggunakan nama fungsi yang 
bersangkutan. Fitur Function ini memiliki beberapa kegunaan, diantaranya: 

A. Mempermudah membaca event dan action. 

Kita bisa mengelompokkan sejumlah aksi-aksi yang berulang menjadi 
sebuah fungsi dengan nama yang jelas, sehingga akan lebih bisa 
memberi gambaran tentang apa yang terjadi dalam logika game kita. 
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System 

On start of layout J'Window 

Set Invisible 


iTiText 

L.. .J 

Set Invisible 

* Pemain 

On collision with A. Musuh j Window 

Set Visible 


iTiText 

L.. .J 

Set Visible 

■*8^Keyboard 

On P pressed JjWindow 

Set Visible 


iTiText 

Set Visible 


L.. .J 



*^Function On “showPopUp" Window 

[TjText 

“^^Function On "hidePopUp* Window 

[TjText 

■*# System On start of layout £ Function 

■* Pemain On collision with A. Musuh Function 

^KlKeyboard On P pressed ^Function 


Set Visible 
Set Visible 

Set Invisible 
Set Invisible 

Call "hidePopUp" 0 

Call "showPopUp” 0 

Call "showPopUp* 0 


B. Memenuhi kebutuhan algoritma kompleks. 

Ada Beberapa persoalan tertentu akan membutuhkan solusi yang 
cukup kompleks, dan hal tersebut dapat terbantu dengan adanya 
fungsi, dengan menggunakan fungsi kita bisa membuat construct 
bekerja seperti programming pada umumnya, tidak hanya terbatas 
dengan daftar objek atau fungsi yang disediakan dalam construct. 
Pengolahan algoritma kompleks akan banyak memanfaatkan 
fitur parameter fungsi, fitur output fungsi, dan fitur 
pemanggilan fungsi. 


3.5 PARAMETER FUNGSI 

Kita bisa membuat fungsi kita menerima sejumlah nilai angka sebagai 
parameter atau nilai masukan yang akan digunakan oleh fungsi yang 
bersangkutan, contohnya kita ingin membuat pop up dengan suatu text 
yang berbeda setiap kemunculan, kita bisa membuat fungsi yang menerima 
parameter yang akan menentukan text apa yang akan ditampilkan. 


3.6 OUTPUT FUNGSI 

Seperti dalam matematika, sebuah fungsi akan mengolah nilai input 
menjadi suatu nilai output. Dalam pemrograman, belum tentu semua fungsi 
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memiliki nilai output, tapi beberapa jenis fungsi misalnya perhitungan 
rumus tertentu dalam game perlu menghasilkan suatu output nilai. 

3.7 CARA MEMBUAT FUNGSI DALAM CONSTRUCT 2 

Pertama kita perlu buka layout editor, lalu klik kanan > Insert new object > 
pilih objek Function. Kita perlu satu instance objek function ini untuk 
mengatur pemanggilan fungsi dalam game kita. 

Deklarasi fungsi, atau bagian kode yang menjelaskan aksi apa saja yang akan 
dilakukan dalam suatu fungsi akan dibuat dalam bentuk event, jadi kita 
perlu buat event baru > pilih Function > On Function > isi nama fungsi yang 
diinginkan. Pastikan nama fungsi mudah dimengerti dan menjelaskan apa 
yang akan dilakukan dalam fungsi tersebut. 

Selanjutnya kita tinggal mengisi bagian action dari fungsi yang sudah kita 
buat, bisa dengan membuat aksi baru secara manual, atau menggunakan 
fitur copy-paste (dengan shortcut Ctrl-C dan Ctrl-V) 

3.8 MENAMBAH PENGOLAHAN PARAMETER PADA FUNGSI 

Semua fungsi sebenarnya bisa menerima parameter, tapi jika tidak kita olah 
nilai yang dimasukkan dalam parameter tersebut, parameter akan diabaikan 
begitu saja oleh fungsi kita. Untuk memeriksa parameter, kita perlu 
membuat sub-event pada event fungsi kita. Klik kanan pada event > Add > 
Add sub-event > Pilih objek Function > Compare parameter. 

Berikutnya kita akan diberi pilihan untuk memeriksa parameter dengan 
indeks tertentu (perlu diperhatikan bahwa indeksnya dimulai dari angka 0, 
bukan dari angka 1). Kita juga diberi pilihan untuk membandingkan nilai 
pada indeks tersebut dengan suatu nilai yang kita tulis. 

Misalnya jika parameter pertama bernilai 1 maka kita akan tampilkan tulisan 
pemain menang, sedangkan jika bernilai 0 kita akan tampilkan pemain 
kalah. Fungsi akhirnya kurang lebih akan seperti ini. 


4 £ Function On "showPopUp" 

f Window 



[T] Text 


£ Parameter 0 = 0 

iTiText 

L.. .J 




£ Parameter 0 = 1 

ifiText 

L...J 


Set Visible 
Set Visible 

Set text to "Kamu kalah :f 

Set text to "Selamat kamu menang! :D" 
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3.9 MEMANGGIL FUNGSI DENGAN PARAMETER 

Untuk memanggil fungsi dengan atau tanpa parameter, kita perlu 
membuat aksi baru, Add action > pilih objek Fungsi > Call Function > 
masukkan nama fungsi yang kita inginkan. Kita bisa memilih untuk 
menambahkan parameter dengan klik opsi Add Parameter lalu mengisi nilai 
parameter dengan indeks yang sesuai. 


Parameters for Function: Call function 


Use these links to add or remove parameters for this action. 


Name |"showPopUp" 

Add parameter 


Cancel Help on expressions 


Back 


Done 


Construct 2 adalah game editor berbasis HTML5 yang dikembangkan oleh 
Scirra Ltd. yang memaksimalkan fungsi visual editor dan behaviour-based 
logic system. Pada bagian ini saya akan menjelaskan fitur-fitur dasar, user 
interface, serta struktur projek yang ada pada Construct 2. 
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Bab 4 

MEMULAI LEMBAR KERJA BARU 


4.1 MEMBUAT LEMBAR KERJA BARU 

Untuk memulai lembar kerja baru pada Construct 2, kita bisa 
melakukan cara-cara sebagai berikut: 





* Construct 2 - Start page 1 


wm 

Home View Events 



C 0 


jt if' Undo ■» jjjj Delete 

^ Acthre configurations: (none) » 

escirra.com r Rl ^ 



I |J5 Copy ( 


•jjf: Select All 
i_ I Select Non 
Selection 


%Displaying: 


^ Forums 
© Hei P Store 


Run Debug Export j 
layout layout project 


Start page x| 



Project Examples 

•j Space Blaster 
i2| Ghost Shooter 
ta Browse examples 


Recent Projects 

3 GAME KATAK1.capx 
3 gameMatik2.capx 
& membuat animasi 
sprite.capx 

3 Template- 

TopDownShooter.capx 
s3j GameMatikl.caproj 
i3 COBA GAME 2.capx 
2[ GameBoial.caproj 


Useful Links 

0 Manual 
0 Tutorials 
Forums 
^ Store 

Stay up to date 

BOS a. 


New to Construct 2? 

Why not try the Beginner’s Guide to 
Construct 2? Also try browsing our 
online list of all tutorials, or read the 
manual. 


PERSONAL license 

This copy of Construct 2 is licensed to 
crysna rhany ningrum 
(crysna.mail@gmail.com). 


t» Projects Layers 


Objects Tilemap 




Silahkan anda klik File - New Project kemudian setelah itu akan muncul 
tampilan seperti di bawah ini dan pilih New Empty Project: 
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4.2 MENGATUR UKURAN LAYOUT, MARGIN DAN WINDOWS SIZE 


Setelah anda mendapatkan tampilan layar kerja seperti ini, langkah 
selanjutnya adalah anda harus mengatur ukuran Windows Size dengan cara 
sebagai berikut: 


0 B .r- - - © & * 

Events 



Construct2 - Layout 1 

|A X Cut ^Undo- 

^-4 (ft Copy 'H Redo * 
Paste 

© Delete 

jig: Select All 

X Active configurations: All 
%Displaying: HTML5 

Scirra.com 

Forums 

(J Help 

$ A 

Scirra Run Debug Export Start 

Store layout layout project Page 

Clipboard Undo 

| Selection 

Configurations 

Online 

Preview Go | 


Properties P X Start page ' Layout 1 X [ Event sheet 1 


:s n 

G About 

Name New project 

Version 1.0.0.0 
Description 

ID com.myco... 

Author 

Website http:// 

B Project settings 

First layout (default) 

Use loader... No 
Pixel roun... Off 

■ Prfviftv fffm Y»_| 

O Window Size 854,480 


Preview br... (default) 
Fullscreen... Letterbox s... 
Fullscreen ... High quality 
Use high-... Yes 


Orientations 
Enable We... 
Sampling 
Downscali... 
Phvsirs en... 


Ready 


On 

Medium q... 
Rnx7D asm... T 



J 




Active layer: Layer 0 


a fjg New project* 

a f ’m Layouts 

|B| Layout 1 
a tM Event sheets 

llsl Event sheet 1 
far Objecttypes 
Tam Families 
Sounds 
Sj Music 
a Files 


t Proje cts Layers 


Objects d X 

All 'Layout 1' objects m 


t Objects Tilemap 

Mouse: |6.0, -13.0,0) Zoom: 100% 


Perhatikan tampilan properties yang ada di kolom sebelah kiri. Rubahlah 
angka Windows Size menjadi 500,500 agar tampilan Windows bisa lebih 
kecil. Kemudian anda klik bagian layout yang berwarna putih hingga muncul 
tampilan seperti di bawah ini : 


mm\ H ° me view 

^ acui 

l£|Cop 

Paste 

Clipboard 


Construct2 - Layout 1 


■T' Undo - 

© Delete 

'H Redo ” 

:■£: Select All 


• ■ Select None 

Undo 

Selection | 


X Active configurations: A 
^Displaying: HTML5 


Scirra Run Debug Export Start 
He| P Store layout layout project i Page 
Online Preview Go | 


Properties 9 

Si 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active layer Layer 0 
llnhniinrlp Nn 


Layout Size 1708,960 
Margms 500,500 


B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


/ Start page/ ’ Layout 1 x Event sheet 1 


W New project* 

a Ojr Layouts 

■ Layout1 
a fcj Event sheets 

|jM| Event sheet 1 
Bf Objecttypes 
tm Families 
Sounds 
fiv Music 
a Sb Files 


fc> Projects Layers 
Objects 

All 'Layout 1' objects 


| Objects Tilemap 


Active layer: Layer 0 


Mouse: (-41.0,3944), 0) 


Rubahlah ukuran Layout Size dan Margin menjadi 500,500 agar tampilan di 
layar kerja Windows dan layout output bisa sama besar. 
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Bab 5 

SPRITE AND BACKGROUND 


5.1 INPUT SPRITE 

Sprite adalah tokoh yang dapat kita masukkan ke dalam layout sebagai 
player, musuh, pijakan ataupun background dari game yang kita buat. Cara 
menggunakan sprite sangat sederhana. Cukup klik kanan pada bagian Layout 
kemudian pilih Insert New atau klik double pada layar kerja yang berwarna 
putih. 


Home | View 


6 Xcut , iTMJndo- jjjj Delete 

[ 


X Arttve configurations: A 


' [Q Copy I Oi Redo » ijf 


fjscirri 


Paste 

Clipboard 


Insert New Object 




Undo 


Properties $ X 

si 

S Layout properties 
Name Layout 1 

Eventsheet Eventsheetl 
Active layer Layer 0 
Unbounde... No 
13 Layout Size 500,500 
0 Margins 500,500 
S Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


Double-dick a plugin to create a new object type from: 


Data & Sto 

i 

B 

Dictionary 

B 

Local storage 

</> 

XML 



e 

Button 

'e 

File chooser 

B 

m 

Progress bar 

•8- 

Slider bar 

HD 

ili 

9-patch 

£ 

Partides 

<5* 

Shadow Light 

& 

Sprite 

m 

Sprite fbnt 

H 

U0 

0D 






te when inserted: Sprite 

Description: An animated object that is the building block of most projects. - More help on 'Sprite' 


New project* 

Tim Layouts 
!■! Layout 1 
Event sheets 
lili Eventsheetl 
^ Object types 
b Families 
Tm Sounds 





Objects Tilemap 


Active layer. Layer 0 


Mouse: (190.0,156.0,0) Zoom: 100% 


Kemudian anda klik Insert dan kita akan mendapatkan tampilan seperti di 
bawah ini: 


** ©&- 

Home | View 


fi-k X Cut Und0 * 

iUI Delete 

J lf5 Copy ** Redo * 

ijij; Select Ali 


; ISelectNone 

Clipboard Undo 

| Selection | 


X Active configurations 
%Displaying: HTML5 


Forums 




Properties d X 

-3 SI 

B Animation Default' proper— 
Speed 5 

Loop No 

Repeat co... 1 

Repeat to 0 
Ping-pong No 
More informat... Help 


Start page Layout 1 X j Event sheet 1 



Animation frames (1) 

s 

0 

_ 



< 1_ 


Lt image: Sprite (Default, frame 0) 


O C % S Si Si G1 S 


100% Mouse: 7,246 


r Layouts 
■ Layout 1 
j/ Event sheets 
|j=| Eventsheetl 
1 Object types 


Projects Layers 


m 


I Objects Tilemap 


Mouse: (-184.0,419.0,0) Zoom: 100% 
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Kemudian klik open dan silahkan anda cari gambar yang ingin anda 
gunakan. Setelah anda mendapatkan gambar yang anda inginkan, silahkan 
anda klik close agar gambar bisa masuk ke dalam layar kerja. 



i Objects | Tilemap 


Ready 


| Events: 0 


Active layer: Layer 0 Mouse: (-184.0,373.0,0) Zoom: 100% 


Home View Events 


Lonstruct 2 - Layout 1 ™ ' 

t <g> 

^Undo- 

Ih Copy '** Redo * 

Paste 

Clipboard Undo 

® Delete 
iigj Select All 

■SelectNone 

Selection 

X Active configurations: All < 
%Displaying: HTML5 

Configurations 

Srra o* b 

~ Scirra j Run Debug Export 

©Help store layout layout project 

Online Preview 

Start 

Page 

Go 



Properties 

*! 51 

B Object type properties 
Name Sprite 


UID 

Global 

B Common 

Opacity 
B Position 


Sprite 


253,252 
B Size 476,431 

B Instance variables 
Add / edit 
B Behaviors 
Add / edit 
B Effects 

Blend mode Normal 
Add / edit Effects 

B Container 

No contai... Create 
B Properties 

Animations Edit 
Size Makelil 




W New project* 

a Ejjr Layouts 

lBI Layoutl 
j CL/ Eventsheets 

|jg Event sheet 1 
a Object types 
Sprite 
Jgl Families 
Sounds 
fa/ Music 
a tm Files 


Cs Projects Layers 


m 


J Approx. 


c. download: 130 kb memory use: 3.1 mb Events: 0 


Active layer. Layer 0 


Mouse: (-183.0,399.0,0) Zoom: 100% 


Pada bagian ini kita bisa mengatur ukuran sprite dengan cara menekan 
tombol Shift dan mouse bersamaan. 


5.2 MENGATUR SPRITE 

Pada saat memasukkan sprite ke dalam layar kerja (Layout) ada beberapa hal 
yang harus kita perhatikan, di antaranya adalah memberi nama sprite agar 
kita tidak bingung ketika akan memanggil sprite tersebut di Event Sheet. 
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X Active configurations: All 
^Displaying: HTML5 


S 0*S A 


■ ^ Forums 


Run Debug Export 
layout layout project 
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Perhatikan gambar berikut ini: 


mm H ° me v,ew 

Events 

^^Construct2 - GAME KATAICl.capx- GameKatald 


t ® 

6%. X™ Undo » 

1 [P) Copy ** Redo - 
Paste 

® Deiete X Active configurations: All 

!i®;SelectAII %Displaying: HTML5 

. S O & B A 

_ Scirra Run Debug Export Start 

W Help Store layout layout project Page 

Online Preview Go 



Clipboard Undo 

Selection | Configurations 




:i Si 

Period... 0 
Period... 0 
Magnit... 5 
Magnit... 0 
B Sine2 

Active... Yes 
Move... Height 
Wave Sine 
Period 1 
Period... 0 
Period... 0 
Period... 0 
Magnit... -5 
Magnit... 0 

Add / edit Behaviors 
B Effects 

Blend mode Normal 
Add / edit Effects 
B Container 

No contai... Create 
B Properties 

Animations Edit 
Size Makel:l 

Initial visih... Vkihle 
Add /edit 

Clickto add, change or remove 
behaviors. 



Pada tampilan properties sebelah kanan terdapat daftar sprite yang telah di 
beri nama. Masing - masing sprite memiliki nama yang berbeda-beda yang 
bertujuan untuk memudahkan pemanggilan sprite pada bagianfi/ent Sheet. 


Untuk memberi nama pada setiap sprite kita bisa melakukannya dengan 
cara sebagai berikut: 


? B" 

O* ; 

'* Corwtnict 2-GAME KATAKl.Cip»- layout 1 

• 

a © S3 

mm * 

“* Vl «* E «" ,s 



C & 


B i 


iP> Unao • jj \ • 


u 

Nime Layout 1 

Everrt sheet Event sheet 1 
Active layer Layer 0 

Unbounde.. No 

t Layout Size 500,500 

♦ Margins 500.500 

Add / edit Effects 

Project P roper... View 




Doub*e<fcd< a pkjgm to creete a new ob)ect type fromr 


Data & Storage 

s ii 

i 

</> 



CD 

& 

H 

B 

•1- 

gD 

ii! 

S 



& 

m m 

9-petdi 


Parbdes 

Shadow Light 

Sprne 

Sprite fbnt TeW 

E 

□S 

tua 






.i. - "■[ 




U*-t. I I crod_j 



U Sprit*3 
C 5pnte4 
ASprteS 

M Sprrtefi 

— Spntet 

— SpnteB 
a Sprite 


Touch 

[Tj WaitingTim. 
V Farmlies 




I Approx. downioad: 363 mb m 


072.0,170.0,0) Zoonv 100% 


I 


£» Si M n «, pk m - 


5.3 ANIMASI SPRITE 

Apabila kita ingin membuat animasi pada sprite agar terlihat lebih menarik, 
maka kita dapat melakukan hal sebagai berikut. 
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Pertama-tama kita masukkan sprite terlebih dahulu ke layout, 



*0& ; 





Construct2 - Layout 1 


i sn 1 s_i 

e O 


6 Xcut .TMJndo f 
[£) Copy Redo ' i iig 


Clipboard Undo 


Delete Active configurations: All - Scirra.com 

SelectAll ^Displaying: HTMLS * ^Forums 

Select None Q Help 

Selection |Configurations_Online 


d OfcB A 

Scirra Run Debug Export Start 

Store layout layout project I Page 



Kemudian pada bagian Animation Frames kita klik kanan pada kotak 
animasi ke 0 dan kita pilih duplicote. Kemudian kita klik open pada kotak 
dialog Edit Image Sprite dan kita pilih gambar berikutnya. 


Home View 

Events 



Construct 2 - Layout 1 

ST®! S J 

^ & 

ftk X Cut Undo ’ 

* [h copy Redo - 

jjjj Delete X Active configurations: All 

i|jfi Select All %Displaying: HTMLS 

fl Scirra.com 

* Forums 

t 

O 

A 


Paste 

Clipboard Undo 

•Select None 

Selection Configurations 

@ Help 

Online 

Store 

1 

Run Debug Export 
layout layout project 

Start 

Page 

Go 



S Frame properties 
Framespeed 1 
More informat... Help 


Animation frames (3) 


vl3 v4v 

0 1 

2 


@ Open 

1 a 1 

p, « Pictures ► My Pictures ► edugame ► sprite 

▼ | | | Search sprite 

Organize ▼ New folder 

s - a ® 


'«■T Favorites 
■ Desktop 
Downloads 
'M Recent Places 

3 Libraries 
13 Documents 
Music 
B Pictures 
H Videos 

I® Computer 

Local Disk (O) 
a SUR02(D:) 


Pictures library 


Arrange by; Folder 


New project* 

Sf Layouts 
M Layout 1 
fr Event sheets 

Event sheet 1 
Object types 


I 


File namei playerShip2_orange.png 



▼ |Allsupportedformats (*.png; *. 

[ Open H | Cancel | 


Objects Tilemap 


Active layer: LayerO 


Mouse: [10.0,97.0,0) 
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Pilihlah gambar yang berbeda dengan gambar pertaman agar bisa dilihat 
Animation Sprite nya. 


B 


View Events 

X Cut Undo * jjjj Delete ^ Artive configurations: Ali 

Copy Redo » I iiilSeledAII ^Displaying HTML5 

j JSelectNone 

do Selection |Configurations 


Clipboard 


Construct2 - Layoutl 


* 5 “ 


= 0 s 

e & 


& Forums 


Run Debug Export 
layout layout project 


O Frame properties 
Framespeed 1 
More informat... Help 



Animation frames (2) 



0 

<b 







* 
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a fa New project* 

a fir Layouts 

IBl Layoutl 
a fa Event sheets 

IHI Event sheetl 
a fa Objecttypes 
ci> Sprite 
fa Families 
fa Sounds 
fa Music 
a fa Files 


t' Projects Layers 


V * /Sprite 


Objects | Tilemap 


Acthre layer. Layer 0 Mouse: (-153.0,418.0,0) Zoom: 100% 


Setelah kita pilih gambar yang berbeda, maka akan kita dapatkan tampilan 
gambar pada bagian Animation Sprite seperti di bawah ini. 


[£3 Copy 

Paste 

Clipboard 





Events 

r' Undo * 

® Delete 

'K Redo - 

ijSjSelect All 


•SelectNone 

Undo 

Selection 


Construct2 - Layoutl 


I ST0 1 s_| 

e © 


5::::" $ O&B A 

_ Scirra Run Debug Export Start 

Help Store layout layout project 1 Page 
Online Preview 60 [ 


Properties 

;s n 

B Frame properties 
Framespeed 1 
More informat... Help 


Layout 1 x Event sheet1 


Animation frames (3) 
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^ Edit image: Sprite (Default, frame 2) 
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f New project* 

1 fa Layouts 
IBl Layoutl 
1 fa Event sheets 
H Event sheet 1 
1 fa Objecttypes 

fa Families 
fa Sounds 
fa Music 
. fa Files 


All 'Layout 1' objects 

d>S P rite 


Activelayen Layer 0 Mouse: (-158.0,381.0,0) Zoom: 100% 
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Lakukan langkah di atas untuk mendapatkan Animation Sprite yang ketiga 
Sehingga akan kita dapatkan tampilan gambar seperti di bawan ini. 


o#- 


Construct2 - Layoutl 


^ © SS 

e © 


6 


^ Cut Undo • ® Delete ^ Active configurations: All 

Copy ^ Redo - ijjj: Select All ^Displaymg: HTML5 

i_ j Select None 

Clipboard | Undo , Selection [Configurations 


S;:ir 


Properties 

:s n 

B Frame properties 
Framespeed 1 
More informat... Help 



New project* 

M’ Layouts 
IMI Layoutl 

M Event sheets 
J! Event sheetl 
M Objecttypes 
db Sprite 
M Families 


Animation frames (3) 

S 

<h 

0 1 

2 



Active layer: Layer 0 Mouse: (-158.0,443.0,0) Zoom: 100% 


Berikutnya, kita akan mengatur jalannya animasi. Silahkan Anda klik double 
pada sprite yang sudah kita beri animasi. Kemudian kita atur speed dan loop 
nya. 


Perhatikan langkah-langkahnya di bawah ini. 


8 * ** * 

Home 

Q& * 



View 

Events 


X cut 

If* Undo - 

j® Delete 

X Active configurations: Al 

(J5 Copy 

Redo - 

lift Select All 

^Displaying: HTML5 



■ • Select None 


Clipboard 

Undo 

J Selection 

Configurations 

Properties 

17 

x I Layout 1 x Event sheet 1 


Construct2 - Layoutl 


£ O & S A 


Forums 
_ Scirra 

(£) Help Store 

Online 


Run Debug Export 
layout layout project 


nur 


sj 

: & 


S Object type properties i^| 
Name Sprite 

Plugin Sprite 
IUD 0 

Global No 
E) Common 

Layer Layer0 

Angle 0 

Opacity 100 
GB Position 247,264 

! Klik dbtible 

Add / edit Instance va... 

B Behaviors 

Add / edit Behaviors 
B Effects 

Blend mode Normal 
Add / edit Effects 
B Container 

No contai... Create 
B Properties 

Animations Edit 

Size Makel:l 

Tnitial visih... Visihle T 





j New project* 

t K Layouts 

H) Layoutl 
* K Event sheets 

1111 Event sheet 1 
d K Objecttypes 
db Sprite 
K Families 
K Sounds 
K Music 
s K Files 

i ftj Projects | Layers 
Objects 

All 'Layout 1' objects 

<4> Sprite 


m 


I Objects Tilemap 


Active layer Layer 0 


Mouse: (-156.0,367.0,0] Zoom: 100% 
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B- 

■■ 

a 


H «T' - - O 5 

Home View 


Construct2 - Layoutl 


l' SJ 

▼ @ 


c °pv 


■T' Undo ■ 

§ Delete 

'H Redo - 

\r2\ Select All 


j Select None 

| Undo 

| Selection | 

d 

X Layoutl 


X Active configurations: Ali 
^Displaying: HTML5 


*"“■ s; u « L* -y- 


Forums 
_ Scirra 

Help store 


Run Debug Export Start 

layout layout project Page 

Preview 60 


Properties 

:i n 


Event sheet 1 


Speed 


Loop 

No 

Repeat co... 

1 

Repeatto 

0 

Ping-pong 

No 

More informat... 

Help 


Atur speed= 



Speed 

The animation speed, in 
animation frames per second. 


'r New project* 

i to' Layouts 
B Layoutl 
i fisr Event sheets 
IMI Event sheet 1 
i Gv Objecttypes 
cfc» Sprite 
Sm Families 
i/j Sounds 
Music 
, tar Files 
Sa Icons 


t* Projects Layers 
Objects 


All 'Layoutl' objects 

<t>Sprite 


SI 


Active layer. LayerO 


Mouse: {-143.0,312.0,0) Zoom: 100% 



Active layer. Layer 0 Mouse: (-161.0,420.0,0) Zoom: 100% 


Langkah selanjutnya adalah melihat preview dengan cara klik Run Layout. 


5.4 MENGATUR IMAGE POINT DAN SET ORIGIN 

Pada saat kita ingin membuat game dengan sistem shooter, maka ada 
beberapa hal yang perlu diperhatikan agar peluru yang kita keluarkan bisa 
tepat berada pada ujung moncong pesawat dan mengarah ke depan, bukan 
mengarah ke samping. 
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Berikut langkah-langkah yang bisa kita lakukan 


Pertama, masukkan sprite pesawat atau tokoh lain yang akan kita gunakan 
sebagai tokoh utama. 


Ibi'I 


Events 


1 [£)Copy 

Paste 

if* Undo ■ 

® Delete 

X Active configurations: Ali * 

** Redo - 

>2! Select Ali 

i i Select None 

^Displaying: HTML5 

Clipboard 

Undo 

J Selection 

Configurations 

Properties 


x [y/ Layoutl 

x ) Event sheet 1 


Construct2 - Layoutl 


£ o & o. a 


e ** 


* ^ Forums 

_ Scirra 

@ Help store 


Run Debug Export Start 

layout layout project Page 

Preview Go 


El Object type properties 


Sprite 

Sprite 


247, 264 
112,75 
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Plugin 
U1D 
Global 

B Common 
Layer 
Angle 
Opacity 
GB Position 
B Size 
B Instance variables 

Add / edit Instance va... 
B Behaviors 

Add / edit Behaviors 
B Effects 

Blend mode Normal 
Add / edit Effects 
B Container 

No contai... Create 
B Properties 

Animations Edit 
Size Makel:l 

Initial visi h... Visihle 



Perhatikan Image Point yang 
menghadap ke kanan 







0 New project* 
j fjjr Layouts 

H) Layoutl 
a fa Event sheets 

|;1| Event sheet 1 
d fa Object types 
db Sprite 
fa Families 
fa Sounds 
fa Music 
d fa Files 

Projects Layers 
Objects 


m 


Adive layer: Layer0 


Objects Tilemap 
Mouse: (-11.0,7.0,0) 


Jika Image Point menghadap ke kanan, maka peluru yang di lontarkan akan 
bergerak ke kanan dan di mulai dari tengah badan pesawat karena Setorigin 
pun berada di tengah badan pesawat. Agar peluru bisa keluar tepat di 
bagian moncong pesawat dan mengarah ke depan sesuai dengan arah 
pesawat, maka kita perlu melakukan perubahan seperti gambar di bawah 
ini. 
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Paste 
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X Active configurations: All 
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%Displaying: HTML5 

• Select None 


Undo | Selection 

Configurations 




Preview Go 


Properties 
'1 zl 

B Object type properties 
Name Sprite 


Blend mode Normal 

Add / edit Effects 

No contai... Create 
3 Properties 
Animations Edit 
Size Makel:l 


r 



Image points 

m 

+ ✓ ffi * 

♦ 

Name Numberl 

-4>- Origin 

0 

O Imagepoint 1 



100% Mouse: -90,176 


112x75 PNG-32_Image point 74,57 


d fa New project* 
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|Bj Layoutl 
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d fa Object types 
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fa Sounds 
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a fa Files 



Mouse: (-137.0,305.0,0) Zoom: 100% 
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1. Perhatikan arah Imoge Point yang masih salah. 

2. Putarlah posisi pesawat dengan menekan tombol Rotate 9(P clockwise 

3. Klik Set Origin And Image Points 

4. Klik moncong pesawat agar muncul Image Point yang baru 

5. Perhatikan pada kotak dialog Images Point sekarang sudah muncul 
Image Point yang baru dengan number 1 


5.5 INPUT BACKGROUND 

Background merupakan latar belakang tampilan yang digunakan untuk 
mempercantik dan memperkuat tampilan layout game. Background juga 
dapat digunakan untuk memperkuat penalaran pemain dalam memainkan 
game yang sedang di mainkannya. Background termasuk komponen 
penting yang harus diperhatikan agar dapat menarik perhatian para 
pengguna game. 

Cara untuk memasukkan game hampir sama dengan ketika kita 
memasukkan sprite ke dalam layout. Hanya saja ada perbedaan hasil ketika 
kita besarkan ukurannya. 


Untuk lebih jelasnya mari kita lihat langkah-langkah memasukkan 
background berikut ini. 
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Pilihlah Tiled Background untuk memasukkan obyek gambar sebagai 
Background. 
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Active layer: Layer 0 
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Pilih gambar yang ingin dijadikan obyek Background. 




Xcut 

[£)Copy 


Paste 

Clipboard 


■ View Events 

f' Undo • f Delete 

^Redo* ijjfi Select All 

: : Select None 
Selection 


X Active configurations: All 
%Displaying: HTML5 


Undo 


Construct 2 - Layout 1 

^ OiB A 

Scirra Run Debug Export Start 
tfijHelp store layout layout project Page 
Online J Preview Go 


□ ® S 

e © 


B Object type properties 
Name TiledBackg... 

Plugin Tiled Back... 

UID 0 

Global No 

B Common 

Layer Layer 0 

Angle 0 

Opacity 
S Position 


100 


193,203 
B Size 512,512 

B Instance variables 

Add / edit Instance va.. 
B Behaviors 

Add / edit Behaviors 
B Effects 

Blend mode Normal 
Add / edit Effects 
B Container 

No contai... Create 
B Properties 

Image Edit 

Initial visib... Visible 
Hntsnnt Tnn-left 



■p New project* 

d Bir Layouts 

B Layoutl 
d 'Om Event sheets 

1111 Event sheet 1 
d B W Object types 

TiledBackground 
^r Families 
Tdm Sounds 
fa Music 
a fr Files 


fe, Projects [ Layers 


m 


Objects Tilemap 
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Jika sudah silahkan tekan gambar silang di kotak dialog Edit Images 
TiledBackground 


B«- "* O*' 

Home View 

Events 

Constmct 2 - Layout 1 

C=) 1 0 S J 

t 

Bk XCdt ^Undo- 

^-1 Copy Redc - 
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▼ Projects 0 X 
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Plugin Tiled Back... 
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Global No 

B Common 

Layer Layer0 

Angle 0 
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B Instance variables 
Add / edit 
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B Effects 

Blend mode Normal 
Add / edit Effects 
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Active layer: Layer 0 


Dan sekarang kita sudah mendapatkan tampilan Background seperti gambar 
di atas. Yang perlu kita perhatikan di sini adalah ketika kita sama-sama 
memasukkan pesawat melalui fungsi sprite dan Tiled Background, maka 
akan terdapat perbedaan hasil. 
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B Effects 
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B Properties 

Animations Edit 
Size Makel:l 

Initial visih- Visible 

Angle 

The angle of this instance, in 


New project* 
Layouts 
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fr Event sheets 
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^ Sounds 
fip Music 


Ready 



Mouse: (-159.0,338.0,0) Zoom: 100% 


Tampilan di atas adalah hasil ketika kita memasukkan pesawat sebagai 
Sprite. 
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B- 

Home View Events 


Construct 2 - Layout 1 
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B Object type properties 
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Plugin Tiled Back... 

UID 0 

Global No 


Layer LayerO 

Angle 0 
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IB Position 192,135 

IB Size 512,512 

B Instance variables 
Add / edit Instance v< 
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B Effects 
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Add/edit Effects 
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jjr New project* 

a Layouts 

B Layout1 
a Sa Event sheets 
HMI Event sheet 1 
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tS . Projects Layers 


All 'Layout 1' objects m 
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Mouse: (-160,0,468.0,0) Zoom: 100% 


Dan gambar di atas adalah tampilan ketika kita memasukkan pesawat 
sebagai Background. Dimana pesawat akan muncul dengan jumlah yang 
sama dengan ukuran Background yang kita buat. 
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Bab 6 

BEHAVIOR 


6.1 PENGERTIAN BEHAVIOR 

Behavior adalah sifat yang dapat ditambahkan pada setiap object sesuai 
dengan keinginan anda. Ada berbagai macam behavior yang ada pada 
Construct 2, berikut ini adalah macam - macam Behavior dan fungsinya 
yang dapat kita gunakan sesuai dengan kebutuhan. 

6.2 MENU DAN ICON BEHAVIOR 

Menu dan icon behavior dapat digunakan dalam situasi yang diinginkan 
sesuai dengan kebutuhan game. Berikut ini adalah macam-macam menu 
dan icon dari behavior. 

8 direction 


8 Direction 


Untuk membuat object dapat dikontrol untuk bergerak ke kanan, kiri, atas, 
bawah bisa kita atur melalui Direction dan Set Angle seperti tampilan di 
bawah ini. 

B Behavior s 
B 8Directk>n 

Max sp... 200 
Acceler... 600 
Deceler... 500 
Directi... 8 directiorjj*- 
Set angle 360 degree... 

Untuk melihat hasilnya pada saat di klik Run Layout, maka kita dapat 
menggeser obyek sprite dengan menggunakan tombol panah yang ada di 
keyboard. 

Anchor 


Anchor 

Berfungsi untuk memposisikan objek secara otomatis agar sesuai dengan 
ukuran layar, hal ini berfungsi untuk mendukung berbagai ukuran layar. 

Bound to Layout 
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Bound to 
layout 

Berfungsi agar obyek tidak keluar dari layar game. Jika anda membuat suatu 
object tanpa menggunakan Bound to Layout, maka jika object tersebut 
digerakkan terlalu kekiri atau terlalu kekanan object tersebut akan keluar 
dari layar. 

Bullet 


S 

Bullet 

Berfungsi untuk membuat object maju lurus kedepan, ini biasa digunakan 
untuk peluru, tetapi bullet juga mempunyai opsi tambahan seperti gravitasi 
dan memantul yang digunakan untuk membuat object seperti bola yang 
memantul, selain biasa digunakan untuk peluru, bullet juga dapat digunakan 
untuk object sebagai musuh yang selalu bergerak secara otomatis 

Car 


/|V 

Car 

Berfungsi untuk membuat object dapat bergerak maju mundur belok kanan, 
kiri seperti memiliki kemudi, car biasanya digunakan untuk game yang 
bertema tentang kendaraan atau balapan. 

Custom movement 



Custom 

Movement 


Membuat obyek dapat bergerak sesuai kebiasaan (event based) movement. 

Destroy outside 


/ 

\ 

Destroy 
outside layout 
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Menghancurkan obyek setelah keluar dari layar utama game. Jika anda 
melihat peluru yang menghilang setelah keluar dari layar pada game, itu 
sebenarnya tidak menghilang, peluru itu akan tetap maju secara terus 
menurus dan jika hal ini dibiarkan lama kelamaan akan membuat loading 
game jadi berat. Untuk menghindari hal tersebut maka gunakanlah Destroy 
Outside Behavior yang akan menghancurkan object secara otomatis setelah 
keluar dari layar 

Drag and Drop 



Drag & Drop 


Berfungsi untuk memberikan sifat pada object agar dapat ditarik dan 
diposisikan sesuai keinginan dengan mengklik atau menyentuh obyek 
tersebut kemudian dapat dilepaskan jika posisi object sudah sesuai dengan 
yang anda inginkan dengan melepas klik atau sentuhan anda. 

Fade 


D 

Fade 

Memberikan sifat pada object agar dapat memudar dan menghilang secara 
otomatis. Contohnya : jika anda menembak musuh dan tembakan 
tersebut mengenai musuh, maka akan keluar api dan api tersebut akan 
memudar dan menghilang secara otomatis. 

Flash 


f 

Flash 

Membuat object dapat terlihat untuk beberapa saat lalu menghilang untuk 
beberapa saat kemudian muncul lagi sesuai waktu yang telah anda set dan 
akan terus berulang - ulang (seperti berkedip). 

Jump-thru 

a 

Jump-thru 
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Untuk membuat suatu pijakan dapat dipijak dan dapat ditembus dari bawah, 
ilustrasinya seperti gambar dibawah ini. 



Solid 



Solid 


Membuat suatu obyek dapat dipijak, sama seperti jump-thru. Namun, solid 
tidak dapat ditembus dari bawah. Ilustrasinya seperti gambar dibawah ini 



SA6USAGAME 

Satu Guru Satu Game Edukasi 


Halaman 45 











Line-of-Sight 


Line Of Sight 


Berfungsi untuk membatasi jarak pandang object. Seperti pada game 
peperangan, biasanya ada object yang menghalangi jarak pandang object 
pemain untuk melihat musuh. Missal terhalang tembok, pohon dan lain 
sebagainya. 


No Save 


X 


No Save 


Biasanya semua object dan tindakannnya akan disimpan dalam game, itu 
akan membuat loading game semakin lama semakin lambat. Dengan 
menggunakan no save behavior maka object yang telah dipasang no save 
behavior dan tindakan - tindakannya tidak akan disimpan dan tidak akan 
membuat loading game menjadi berat. 

Path Finding 



Pathfinding 


Berfungsi untuk membuat object sebagai pemain dapat menemukan jalan 
tercepat disekitar rintangan secara cepat. 


Persist 


oo 


Persist 


Membuat object dapat mengingat tata letak yang berbeda pada saat 
ditinggalkan kemudian kembali lagi ke tempat tersebut. Object yang 
menggunakan persist behaviour disebut juga sebagai tata letak terus 
menerus. Ibaratnya, disaat anda telah menghancurkan dinding kemudian 
meninggalkannya, maka saat anda kembali lagi ke tempat tersebut 
kondisinya sama seperti saat anda tinggalkan (dindingnya tetap hancur) 
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Physics 



Physics 


Untuk contoh penggunaan physics behavior, anda lihat saja pada game 
Angry Bird dimana reruntuhan gedung berjatuhan kebawah dan jika salah 
satu object pada gedung yang roboh tersebut menyentuh object lain 
(gedung lain) maka object yang tersentuh akan ikut bergoyang atau bahkan 
ikut roboh. 


Pin 




Object yang diberi Pin Behavior akan memberikan kesan bahwa object 
tersebut telah disematkan atau menempel pada obyek lain. 

Platform 


tf. 

Platform 

Obyek yang diberi Platform Behavior berfungsi sebagai Pemain dalam 
game tersebut yang dapat digerakkan sesuai keinginan anda. 

Rotate Behavior 


G 

Rotate 

Berfungsi agar game seolah-olah berputar 

Shadow Caster 


Shadow 

Caster 

Memberikan efek shadow (bayangan) pada object yang diberi Shadow 
Caster Behavior. Untuk lebih jelasnya, lihat gambar dibawah ini 
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Tanpa shadow Caster 



Menggunakan Shadow caster 

Dapat menyesuaikan object (seperti posisi, ukuran atau sudut). Seperti 
membuat rumput bergoyang secara teratur dan terus menerus. Ini akan 
mempercantik tampilan game anda. 
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Timer 


0 

Timer 


Berfungsi untuk memberikan batas waktu untuk pemain 
menyelesaikan permainan. Time Behavior digunakan hampir disetiap game. 

Turret 



Turret 


Apakah anda pernah memainkan game contra? Jika pernah pasti anda 
melihat didalam game contra ada Tank yang dapat dinaiki dan mengikuti 
arah gerakan si object pemain. Nah, itulah fungsi dari Turret Behavior 

Wrap 


2 


Wrap 

Wrap digunakan untuk menjalankan obyek sprite dari background 1 
ke background 2 dan kembali lagi ke background 1 dan seterusnya. 
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Bab 7 

MENGENAL EVENSHEET 


7.1 MENGENAL EVENSHEET 

Event Sheet merupakan tempat yang digunakan untuk mengatur jalannya 
logika game. Alur game yang sudah kita buat logika nya akan kita atur pada 
bagian EventSheet ini. Ada beberapa hal yang perlu kita ketahui dalam 
mengatur Event Sheet , di antaranya adalah dengan mengatur variable 
jika kita menggunakan fungsi- fungsi yang harus di deklarasikan di awal. 
Sebagai contohnya adalah fungsi Score, Life ataupun Time dimana kita 
harus menentukan nilai awal dari ketiga komponen tersebut. 

Untuk menambahkan Global Variable kita bisa melakukan langkah-langkah 
sebagai berikut: 

Pertama, tentukan dahulu variabel apa yang akan digunakan. Sebagai 
contoh jika kita ingin menambahkan skor pada game yang kita buat, maka 
kita perlu menambahkan variabel skor. Klik kanan pada bagian Event Sheet 
kemudian pilih Add Global Variable. 

Perhatikan gambar di bawah ini. 

New global variable 


i 



Isikan variabel yanp diinginkan. 


Namef Variable 1 


Misal VarScore 


Type Number 



Description 

(optional) 


|_| Slstic 

Constant 3 


Help 
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7.2 LOGIKA SCORE 

Pada bagian ini kita akan membahas bagaimana caranya membuat logika 
Score pada Construct 2. Hal yang harus kita pastikan adalah memasukkan 
text pada bagian layout. Text ini nanti yang akan mewakili Score yang akan 
kita buat. Untuk lebih jelasnya mari kita lihat pada tayangan gambar berikut 
ini. 




Xcut 

[Q Copy 


Clipboard 


ne View Events 






e © 

Undo » jjj) Delete 
*** Redo - iijj; Select Ali 

i' j Sdect None 

X Active contigurations: Ali 
%Displaying: HTML5 

- ^ Forums 

@ Help 

$ 

Scirra 

OiS 

Run Debug Export Start 



Undo Selectlon 

Contigurations 

Store 

layout layout project Page 

Preview | Go | 



P X Layout1 

. xj Event sheet 1 




▼ Projects 

P X 


Properties 

»1 U 

B Layout properties 
Name Layout 1 

Event sheet Event sheet1 
Active layer LayerO 
Unbounde... No 
S Layout Size 1708,960 
S) Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


Doubleclick a plugin to create a new object type fforn: 



■j New project* 

j fa Layouts 

|B) Layout 1 
a fa Event sheets 

IH Event sheet 1 
Object types 
ih/ Families 
fa Sounds 
U-j Music 
a fa Files 


fc Projects | Layers 


m 


Active layer: Layer 0 


Mouse: 051 J0, 167.0,0] Zoom: 100% 


Masukkan terlebih dahulu Text ke dalam Layout dengan cara klik kanan 
pada Layout kemudian pilih Text atau bisa langsung klik dobel pada Layout 
kemudian pilih Text, kalau sudah klik Insert. 

Selanjutnya akan muncul tampilan seperti di bawah ini. 




» Xcut r* Undo* 
[ft Copy 'H Redo * 


i Delete ^ Active contigurations: Ali 

ijfiSelectAII %Displaying: HTML5 

i Select None 

Selectlon [Contigurations 


o * Q A 

_ Scirra Run Debug Export Start 

© Help store layout layout project Page 

Online Preview | Go | 
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Pada gambar di atas, tulisan yang muncul masih dalam bentuk tulisan 
standar yang akan muncul pada saat kita memasukkan perintah Text. Untuk 
mengganti tulisan Text menjadi tulisan sesuai dengan yang kita inginkan, 
maka kita bisa menggantinya dengan cara mengganti tulisan Text yang 
ada pada bagian Propesties di sebelah kiri. 

i" " ■ " - 1 ^ 



o*p * 


Smi PJJ' Cfj.iI E 


3 U 

■ 5o* 


T*d 

til.r • 


K4 ■*< vt-1 

■vM 


Ih# 



C#**- 



Hmiiiii . 

LmTI 


V*nrfjJ *. 

lEf 



Vf Ml 





1 • • twn.fr 

a 


C*I Htnill . 




L 



Hasil 
editi ng 


|r i 'Cr i K t-d> 

■ Ey^H -Aw&. I 
- T " - r 

b : —<-n 
b -—fc 
kUw 

b 

|p Lw 


Sila h ka n di ganti 
sesuai dengan 


i U' 


•r pmj. mo,*. 


Kemudian kita juga perlu mengganti nama Text yang kita buat agar tidak 
sama dengan nama Text yang lainnya. Caranya cukup dengan menekan 
klik kanan pada nama Text di tabel properties sebelah kanan kemudian 
pilih rename, jika sudah silahkan di ganti sesuai dengan nama teks yang 
diwakilinya sebagai contoh adalah Score. 

Berikut adalah tampilan gambarnya setelah di rubah. 
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Langkah selanjutnya yang harus kita lakukan setelah mengatur Text adalah 
mengatur Event Sheet. Yang pertama kita tambahkan terlebih dahulu Global 
Variabel nya dengan menekan klik kanan pada layar kerja di Event Sheet 
kemudian pilih Add Global Variable. Masukkan nama Variable yang bisa 
mewakili, misal kita beri nama VarScore. Tentukan angka value nya, misal 
kita tentukan bahwa Score dimulai pada nilai awal 0, maka isikan angka 0 
pada kolom isian value. 




& 


View Events 


(Q Copy 


Clipboard 


Undo - 

® Delete 

^ Redo - 

■w2\ Select All 


: : Select None 

Undo 

Selection 


X Active configurations: 
^Displaying: HTML5 


s; O o L* w 


^ Forums 
^ Scirra 

Ltl Help store 


Run Debug Export Start 

layout layout project Page 

Preview Go 


Properties A > 

»S zi 

E) Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active layer LayerO 
Unbounde... No 
E) Layout Size 
El Margins 
B Effects 
Add / edit 

Project Proper... View 
More informat... Help 


Layout 1 Event sheet 1 X J 


1708,960 
500,500 


Effects 


Even N ew global variable 


auenf. 


Name VarScore 


□static 

O Constant 


r New project* 

i fa Layouts 

■ Layout 1 
i fa Event sheets 

||=| Event sheet 1 
i fa Objecttypes 
[t] score 
fa Families 
fa Sounds 
fa Music 
. fa Files 
fa Icons 


te ProjectS ; Layers 
Objects 

Ali 'Layout 1' objects 

iTi-ore 


Objects 1 T 


Active layer: LayerO 


Mouse: (-40.0, 5.0,0) 


B Q S 7 
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Jika proses pendeklarasian Variable Score sudah benar, maka akan muncul 
tampilan seperti gambar di atas, dimana akan muncul Global number 
VarScore=0. 


Sampai pada tahap ini berarti kita sudah bisa menentukan besaran Variable 
Score. Untuk memasukkan angka Variable Score ke dalam Text score, maka 
kita perlu menambahkan perintah pada System. Caranya adalah dengan klik 
Add Event kemudian pilih System, kemudian tekan next. 

Selanjutnya kita akan mendapati tampilan seperti di bawah ini, 



Active layer: LayerO 


Mouse: (-40.0, 5.0,0) 


Lanjut, pilih On Start of Layout, kemudian tekan Done. Jika prosedur benar 
maka akan menghasilkan tampilan seperti di bawah ini. 


fc' B «- 

n 


B- (iiP ■■ '■ 

Home View Events 


1 l£)Copy 

Paste 

Undo - 

® Delete 

X Active configurations: All 

Redo » 

itf: Select All 

•SelectNone 

^Displaying: HTML5 

Clipboard 

Undo 

Selection 

Configurations 

Properties 

3 x Layout 1 Event sheet 1 x| 


escirra.com ^ ^ 


* Forums 

_ Scirra 

^ Help store 


Run Debug Export 
layout layout project 
Preview 


i n 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active layer LayerO 
Unbounde... No 
B Layout Size 1708,960 
B Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


& Global number VarScore = 0 
■P System On start of layout 


fm New project* 

a Layouts 

IMI Layout 1 
a Event sheets 

|jj Event sheet 1 
a ftg Objecttypes 

S score 

Jm Families 
fm Sounds 
Music 
a fm Files 


(i Projects | Layers 
Objects 


All 'Layout 1' objects 

iTiscore 


Objects | Tilemap 


Active layer: Layer 0 


Mouse: (137.0, -16.0,0) Zoom: 100% 


SA6USAGAME 

Satu Guru Satu Game Edukasi 


Halaman 54 
































































Selanjutnya kita akan menambahkan Action yang ditimbulkan ketika kita 
menambahkan Event seperti gambar di atas, caranya kita klik Event 
kemudian kita pilih Text yang ingin di beri aksi, dalam hal ini kita 
menggunakan Text Score. Kemudian kita klik next dan kita beri perintah Set 
Text. 



a 

a 

6. 


Clipboard 


** Undo ' 

fljj Delete 

X Active configurations: All 

'H Redo ' 

:fii Select All 

^Displaying: HTML5 


iSelectNone 


| Undo 

Selection 

Configurations 


Rsci "‘“"S ^ 


T ^ Forums 


Run Debug Export Start 

layout layout project Page 

Preview Go 


Properties d > 

'S zi 

El Layout properties 
Name Layout 1 

Event sheet Event sheet 1 

Activelayer LayerO 
Unbounde... No 
El Layout Size 1708,960 
El Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


Event sheet 1 X I 


«jr Global number VarScore = 0 
o System On start of layout 


Set the text of this object. 


« Setvalue 

9 Toggle boolean 


Misc 

[TjDestroy 


Size & Position 


T 

Moveatangle 

[T 

T 

Set height 

£ 

T 

Set position to another object 

[T 

T 

Setwidth 


T 

Set Y 



Z Order 

[TjMove to bottom 
[TjMove to object 


9 Subtract ffom 


Move forward 
Set position 
Set size 
SetX 


[TjMove to layer 
[TjMove to top 


-^yts 
youtl 
sheets 
ent sheet 1 
ttypes 
ore 

ei- 


He!ponText;actions 



Objects 1 Tilemap 


Active layer: Layer 0 


Mouse: (-40.0, 5.0,0) 
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Berikutnya muncul tampilan gambar seperti di bawah ini, 




View Events 


b 


l£) Copy 


Clipboard 


Undo - 

i2i Delete 

Re do ’ 

!tf! Select All 


ISelectNone 

Undo 

Selection 


“ — 

^ Active configurations: 
^Displaying: HTML5 


""Construct 2 - Event sheet 1 


Properties <7 > 

*S zi 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active layer LayerO 
Unbounde... No 
B Layout Size 1708,960 
B Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


Event sheet 1 X | 


$ Global number VarScore - 0 
System On start of layout 


" sffs o & L* A 


Parameters for sc 


Enter the text to set the object's content to. 


Text |"Score = " & VarScore 


Help on exoressions 


r New project* 

1 fcj Layouts 
IMI Layout 1 
1 fa Event sheets 

||=| Event sheet 1 
1 fa Objecttypes 
[t] score 
Ski Families 
fa Sounds 
fa Music 
. fa Files 
fa Icons 


t» Projccts Layers 
Objects 



Active layer: LayerO 


Mouse: (-40.0, 5.0,0) 


Pada langkah ini, kita perlu menambahkan Text dan Variable apa yang di 
wakili, sehingga dalam bagian ini kita perlu menuliskan "Score = " & 
VarScore. Maksudnya adalah kita akan memasukkan nilai Score yang di 
dapatkan dari VarScore. Jika sudah selesai kita klik Done. 


Tampilan yang akan kita dapatkan adalah seperti di bawah ini. 

'b ™ ™ 


|0M3!!jNM Home 1 View 

Events 


m, xcut 

1 [Q Copy 
Paste 

(T' Undo " 

jjjj Delete 

X Active configurations: All 

^ Redo - 

>2: Select All 

: ISelectNone 

%Displaying: HTML5 

Clipboard 

[ Undo 

Selection 

Configurations 


^ O& L» A 


Forums 
_ Scirra 

Lul Help store 


Debug Export Start 

layout layout project Page 

Preview 60 


Properties <7 > 

:s Si 

B Layout properties 
Name Layout 1 

Event sh eet Event sh eet 1 
Active layer LayerO 
Unbounde... No 
B Layout Size 1708,960 
B Margins 500, 500 
B Effects 
Add/edit 
Project Proper... 

More informat... 


Effects 

View 


Layout 1 Event sheet 1 x j 


yjy Global number VarScore = 0 
1 -»0 System On start of layout 


Set text to 'Score = " & VarScore 


B' New project* 

a fa Layouts 

IB Layout 1 
a fa Event sheets 

|;=| Event sheet 1 
* fa Objecttypes 



Active layer: Layer 0 


Mouse: (-40.0, 5.0,0) 
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Sekarang mari kita lihat hasilnya pada game yang kita buat. Silahkan 
tekan tombol Run Layout untuk melihat hasilnya. 


Home View Events 


Construct2- 


ayoutT 




Ready | Events: 2 Active layer: Layer 0 Mouse: (-43.0,431.0,0) Zoom: 100% 


Dapat kita lihat pada hasil Run Layout bahwa sekarang Score sudah 
muncul dengan nilai awal adalah 0. 


Lalu bagaimana caranya untuk memunculkan pertambahan nilainya jika 
Score mengalami pertambahan nilai? 

Barikut caranya. Pada saat kita akan memasukkan Text Score, kita atur dulu 
jalannya action, dengan cara klik System kemudian pilih Add Value dan 
isikan dengan nilai pertambahan angka sesuai angka Score yang kita 
inginkan. Untuk lebih jelasnya mari kita cek tampilan gambar berikut ini. 


Home View Events t © 


e 


X Cut 

(fr Copy 


§ Delete 
IjffSelectAII 


X Active configuratior 
^Displaymg HTML5 


fi Scirra.com 
Forums 


: Select None 

Oipboard | Undo , Selection |Configurations 


^ ©«f B « 

Scirra J Run Debug Export Start 

Store layout layout project Page 



Ready I Events: 2 Active layen Layer 0 Mouse: [137.0, -16.0,0) Zoom: 100% 
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: B « 


- O*; 

Home View 


£& X Cut Undo - 

jjj Delete 

^ Active configurations:] 

, ~ Stirra.com 

Copy ^ Redo 7 

igi Select All 

^Displaying: HTML5 

Forums 


: : Select None 


©Help 

Clipboard Undo 

Selection 

Configuration 

! | Online 


Properties 

iS Si 

El Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Activelayer LayerO 
Unbounde... No 
S Layout Size 1708,960 
S Margins 500, 500 
B Effects 

Add/edit Effects 
Project Proper... View 
More informat... Help 


AX Layout 1 Event sheet 1 x| 


Global number VarScore - 0 
System On start of layout 


^ O&LIA 

Run Debug Export Start 
layout layout project Page 

Preview Go . 


=> 1 @ 1 ^§2_|l 

e & 


Parameters for System: Add to 


Value to add to this variable. 


Variable |$ v< 


Value (1CT 


Help on exoressions 




Projects d X 

a £r New project* 
j fSr Layouts 

IMI Layout 1 
a Event sheets 

||=| Event sheet 1 
a fm Objecttypes 
[t] score 
fjf Families 
Sm Sounds 
'\'m Music 
a fr Files 

Ef Icons 

te, Projects j Layers 

Objects 

Ali 'Layout 1' objects 

iTi-ore 


I Objects Tilemap 


Active layen LayerO 


Mouse: (137.0, -16.0,0) 


0 B ** - O • 


Constructz - 


Home 

View 

Events 

f&S Xcut 

Undo - 

® Delete 

* [Q Copy 

Redo •» 

i w2\ Select All 



: 1 Select None 

Clipboard 

Undo 

Selection 


m ’^iii 

e o 


X Active configurations: Al 
^Displaying: HTML5 


isUoLiw 


Forums 
_ Scirra 

Help store 


Debug Export Start 

layout layout project Page 

Preview Go 


Properties d > 

iS Si 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Activelayer LayerO 
Unbounde... No 
B Layout Size 1708,960 
B Margins 500, 500 
B Effects 

Add/edit Effects 
Project Proper... View 
More informat... Help 


Event sheet 1 x 


^ Global number VarScore = 0 
1 System On start of layout 


System Add 10 to VarScore 
1 iT!score Set text to 'Score = '& VarScore 


W New project* 

a Etf Layouts 

■ Layout 1 
a Sy Event sheets 

||=| Event sheet 1 
a Jjm Objecttypes 
[t] score 
Br Families 
Km Sounds 
Tm Music 
a £jr Files 

fir Icons 


te Projects j Layers 
Objects 

Ali 'Layout 1' objects 

iTi-ore 


Objects Tilemap 


Active layen LayerO 


Mouse: (137.0, -16.0,0) 


Pada tampilan Eventsheet sudah terlihat bahwa ketika nanti kita 
menambahkan logika tubrukan benda yang menghasilkan pertambahan nilai 
pada Score, maka nilai Score akan bertambah sesuai dengan besaran value 
yang kita isikan dan banyaknya Score yang di dapat dari hasil tubrukan 
benda tersebut. 

Untuk lebih jelasnya, nanti akan kita bahas secara tuntas pada bab 
pembuatan game sederhana. 
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7.3 LOGIKA LIFE / NYAWA 

Pada Bab ini kita akan membahas bagaiana caranya untuk memberikan 
logika nyawa pada game yang kita buat. Logika Life sebenarnya hampir 
sama dengan logika Score. Yang menjadi pembedanya adalah pada 
rumus logikanya. Pada logika Score , jika terjadi tubrukan benda yang 
menghasilkan nilai, maka kita menggunakan rumus Add Value untuk 
menambahkan nilai Score. Sedangkan pada logika Life, jika terjadi tubrukan, 
maka nilai Life / Nyawa akan dikurangi. Untuk itu kita memerlukan rumus 
Substract From agar jumlah nilai pada nyawa atau Life bisa berkurang. 


Untuk lebih jelasnya bisa kita lihat pada tampilan berikut ini. 

Pertama-tama masukkan terlebih dahulu Text dan ganti isi maupun 
namanya dengan Nyawa. 


B f' - © & - 


X Cut Undo * 

(J} Copy Redo - 


e 


Clipboard 


juj Delete X Active configurations: All 

ijifiSelectAII %Displaying: HTML5 

i__ j Select None 

| Selection [ Configurations 


Construri 2 - game buku.capx - Layoutl 


_ Scirra Run Debug Export Start 

'i» He| P Store layout layout project Page 


□ j @ . SS | 


e © 


Properties t 

’i n 

B Object type properties 


Name 

Plugin 

UH) 

Global 

B Common 
Layer 
Angle 
Opacity 

B Position 


nyawa 

Text 


100 


391,199 
B Size 200, 30 

B Instance variables 

Add / edit Instance va... 
B Behaviors 

Add / edit Behaviors 

B Effects 

Blend mode Normal 

Add / edit Effects 

B Container 
No contai... 

B Properties 
Text 

Initial visib... 

Fnnt 


Create 


Visible 
Arialfl 7) 


Layout 1 x | Event sheet 1 









□ 


□ 




D pjyawa = 


1° 




□ 


□ 








i! 4 

... | 


* 



j New project* 

* S» Layouts 

(QJ Layoutl 
t Sa Event sheets 

D Event sheet 1 

* Object types 
[t] nyawa 

Im Families 
Cj Sounds 
t/ Music 
t [Files 


| fe Projects [ Layers 
Objects 

All 'Layoutl' objects 

! T i nyawa 


BS 


Active layer: Layer 0 


Mouse: (-43.0,336.0,0) 


Setelah itu tambahkan Global Variable dengan nama VarNyawa dengan 
nilai t/o/tve awal adalah 5. Kita asumsikan di sini bahwa Nyawa / Life akan 
di awali 
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dengan nilai 5 dan akan berkurang jika tokoh Player bertabrakan dengan 
musuh / Enemy. 


B ^ © & 5 


Construct 2 - game buku.capx - Event sheet 1 


=. ! © S | 


FjL X Cut ^ Undo - § Delete 

[ft Copy Ol Redo ’ ItflSelectAII 

^ Active configurations: All 

Scirra.com 

§8 

%Displaymg: HTML5 

’ ^ Forums 

Paste 

• ISelectNone 

^ Help 

Store 

Clipboard Undo J Selection 

Configurations 

Online 


Properties d x Layout l ' Event sheet 1 x| 




▼ Projects 


Si 

El Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Activelayer LayerO 
Unbounde... No 
S Layout Size 1708,960 
l±l Margins 500, 500 
B Effects 
Add / edit 
Project Proper... 

More informat... 


Effects 
, View 



f New project* 

i Efir Layouts 

B Layout 1 
i SLl Event sheets 

||j| Event sheet 1 
i Jm Objecttypes 
[x] nyawa 
far Families 
Sounds 
Vlj Music 
i fr Files 


Project s; Layers 

Objects U x 

All 'Layout 1' objects ;©l 

! T ! nyawa 


Objects Tilemap 


Active layer: LayerO 


Mouse: (305.0, -17.0,0) Zoom: 100% 


Setelah itu kita masukkan nilai value dari nyawa / Life ke dalam tampilan 
Layout Output. Caranya sama dengan ketika kita menempatkan nilai Score 
ke dalam Layout Output. 

Perhatikan tampilan gambar berikut ini : 


^ H ^ ^ - ©& ; 

Home I View Events 

X Cut 


Construct 2 - game buku.capx - Event sheet 1 


’!®' s I 

c © 


6, 


Clipboard 


■T' Undo - 

® Delete 

^ Active configurations: All 

Redo » 

Itf: Select All 

i’ ISelectNone 

^Displaying: HTML5 

| Undo 

Selection 

Configurations 


$:r”^ o& s ^ 

_ Scirra Run Debug Export Start 

vtv Hel P Store layout layout project Page 


Properties A > 

Si 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active I ayer Layer 0 
Unbounde... No 
El Layout Size 1708,960 
E) Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


Event sheet 1 


Global number VarNyawa = 5 
Add event 


Double-dick an object to create a condition from: 



rts 

sheets 
•ent sheet 1 
ttypes 
rawa 


m 


Objects Tilemap 


Active layer: Layer 0 


Mouse: (305.0, -170,0) Zoom: 100% 
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B f' 




Clipboard 


Undo * 

® Delete 

^ Active configurations: All 

'■'* Redo - 

irj: Select All 

^Displaying: HTML5 


: Select None 


Undo 

Selection 

Configurations 




^Forums 
^ Scirra 

Help store 


Run Debug Export Start 

layout layout project Page 

Preview Go 


Properties O > 

*s n 

El Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Activelayer LayerO 
Unbounde... No 
ffl Layout Size 1708,960 
B Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


Layout l2T 


Event sheet 1 X 


yjy Global number VarNyawa = 5 
1 {( System On start of layout 


Subtract ffom the value of a global or local variable. 


Display 

{(Setcanvas size 
{(Set pixel rounding 

General 

{(Create object 
{(Go to layout (by name) 
{(Restart layout 
{(Sort Z order 

Global & local variables 
^>Add to 
<£ Set value 


{(Set fullscreen scaling 
{(Snapshot canvas 


{(Goto layout 
{(Go to next/previous layout 
{(Set group active 
{(Stop loop 


{(Reset global variables 
Subtract ffom 


Layers & Layout 
{(Recreate initial objects 
{(Set layer angle 
{(Set layerblend mode 
fx Set layer effect parameter 
{| Set layer opacity 


{(Reset persisted objects 
{(Set layer background color 
fx Set layer effect enabled 
{(Set layer force own texture 
{(Set layer parallax 


Help on 'System' actions 


'yts 

sheets 
’ent sheet 1 
ttypes 
rawa 



Active layer: Layer 0 


I Objects Tilemap 

Mouse: (154.0, -17.0,0) Zoom: 100% 


Pada bagian di atas kita memberikan logika pengurangan (Substract From) 
pada nilai Life/Nyawa. 


Kemudian kita memasukkan besarnya nilai pengurangan pada Variable 
Nyawa seperti gambar di bawah ini. 


D9 

fc 


1 tfrcopy 


Paste 

Clipboard 


(T' Undo - 

jOi Delete 

Redo * 

:tf| Select All 


i ‘SelectNone 

Undo 

Selection 


^ Active configurations: 
%Displaying: HTML5 


Properties 

:i n 

El Layout properties 


Event sheet 
Activelayer LayerO 
Unbounde... No 
B Layout Size 1708,960 
B Margins 
B Effects 
Add / edit 
Project Proper. 

More informat... 


Layout 1 
Event sheet 1 


500, 500 


Effects 
. View 


$ Global number VarNyawa 
1 *>{( System On start of layc 


o*b a 


Parameters for System: Subtract from 


Choose the variable to change. 


Variable | ^ VarNyawa 
Value [l ~ 


[ Cancel 


Help on expressions 


r New project’ 

■ tar Layouts 

■ Layout 1 
i far Event sheets 

na Event sheet 1 

■ far Object types 

[t] nyawa 
far Families 
frj Sounds 
tm Music 
i tet Files 


t» ProjectsJ Layers 
Objects 


All 'Layout 1' objects 

r™i 

i T i n yawa 


Active layer: LayerO 


Mouse: (154.0, -17.0,0) 
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• h- 

Home View 

Events 





e © 

rft * Cut 

^-3 [[5 Copy 
Paste 

Clipboard 

Undo * 

''a Redo - 

Undo 

jjjj Delete 

i w2\ Select All 

i i Select None 

Selection 

^ Active configurations: All ’ 

^Displaying: HTML5 

Configurations 

fjscirra.com 
^ Forums 
@ Help store 

O&S 

Run Debug Export 
layout layout project 

Preview 

Start 

Go 



Properties V > 

’S n 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active layer Layer 0 
Unbounde... No 
B Layout Size 1708, 960 
B Margins 500,500 
B Effects 

Add/edit Effects 
Project Proper... View 
More informat... Help 


Layout 1 


Event sheet1 X 


& Global number VarNyawa = 5 
System On start of layout 


0 System Subtract 1 from VarNyawa 


Projects P x 

a fa New project* 

j fa Layouts 

|£2j Layout1 
a fa Event sheets 

IH Event sheet 1 
a fa Objecttypes 
[t] nyawa 
fa Families 
fa Sounds 
fa Music 
j fa Files 

fa Icons 


Projects Layers 
Objects 

All 'Layout 1' objects 

i-1 

! T i nyawa 


@1 


Active layer Layer 0 


Objects Tilemap 

Mouse: (154,0, -17.0, 0) Zoom: 100% 


Setelah itu kita masukkan nilai value dari Variable Nyawa dengan cara 
sebagai berikut: 



Active layer Layer 0 


Mouse: (154.0, -17.0,0) 
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fc 


Clipboard 


Undo - 

f Delete 

X Active conflgurations: All » 

'H Redo - 

iOiSelect All 

%Displaying: HTML5 


i : Select None 


| Undo 

| Sefectlon | 

Configurations 


Rsa “ & O & Q A 


^ Forums 
^ Scirra 

O Help store 


Run Debug Export 
layout layout project 


Properties 9 > 

'S A I 
*= Z* 

5 Layout properties 
Name Layout 1 

Event sheet Event sheet 1 

Active layer Layer 0 
Unbounde... No 
B Layout Size 1708,960 
a Margins 500, 500 
B Effects 

Add/edit Effects 
Project Proper... View 
More informat... Help 



Layout 1 Event sheet 1 x 


Sjjl Global number VarNyawa = 5 
1 System On start of layout 


System 
Add action 


Subtract 1 from V 


Projects 

a Sa New project* 


Set the text of this ol 



sheets 
ent sheet 1 
ttypes 



j ’ Objects 1 Tilemap 


Active layer Layer 0 


Mouse: (1S4.0, -17.0,0) Zoom: 100% 
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"hT UT! 


^ ^Cut 
^—1 [Q Copy 
Paste 

lf> Undo - 

f Delete 

^ Active conf igurations: All 

Redo ” 

]r2\ Select Ali 

■ j Select None 

[^Displaying: HTML5 

Clipboard 

| Undo 

Selection 

Configurations 

Properties 

? x Layout 1 Event sheet 1 x | 


^ o * s a 

_ Scirra Run Debug Export Start 

't# Help Store layout layout project Page 

Online Preview Go 


Si 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Activelayer LayerO 
Unbounde... No 
E) Layout Size 1708,960 
E Margins 500, 500 
B Effects 

Add/edit Effects 
Project Proper... View 
More informat... Help 


Global number VarNyawa = 5 
System On start of layout 


System 
[T j nyawa 


Subtract 1 from VarNyawa 
Settextto "Nyawa = ' & VarNyawa 


W New project* 

* fty Layouts 
IMI Layout 1 
4 fcj Event sheets 

[ij| Event sheet 1 
4 Objecttypes 

[Tj nyawa 
Sr Families 
Ej Sounds 
Br Music 
4 Files 


W 


Ali 'Layout 1' objects 

T j nyawa 




Objects | Tilemap 


Ready 

| Events: 2 

Active layer: Layer 0 

Mouse: (154.0, -170,0) Zoom: 100% 


Home View Events 






t (&) 


fo 


X Cut rf"' Undo - 

[Q Copy Redo * 




Clipboard 


Undo 


Properties P : 

:i n 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Activelayer LayerO 
Unbounde... No 
B Layout Size 1708,960 
B Margins 500, 500 
B Effects 
Add / edit 
Project Proper... 

More informat... 


Effects 
. View 



▼ Projects 


jr New project* 

4 \jm Layouts 

IB Layout 1 
4 Event sheets 
m Event sheet 1 
4 fa Objecttypes 
[t] nyawa 
Jm Families 
fa Sounds 
fa Music 
a fa Files 

fa Icons 

Projects | Layers 
Objects 

Ali 'Layout 1' objects 

i T ! n ya w a 


Dari gambar di atas kita dapat melihat hasil dari Nyawa yang sudah 
berkurang dari nilai awal 5 menjadi 4. Logika ini akan kita bahas 
secara tuntas pada pembahasan di Bab pembuatan game sederhana. 
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7.4 LOGIKA TIME / WAKTU 

Logika Time atau waktu sangat sering kita jumpai pada game yang kita 
mainkan. Biasanya waktu akan di hitung mundur dan ketika waktu sudah 
habis, maka game akan selesai. Ini bisa kita terapkan pada bentuk-bentuk 
evaluasi untuk siswa dimana siswa akan di beri waktu tertentu untuk 
menyelesaikan game yang isinya terkait dengan evaluasi pembelajaran mata 
pelajaran tertentu. Dengan adanya batasan waktu, siswa akan terbiasa 
untuk mengerjakan soal secara cepat. 


Untuk membuat logika Time, maka kita perlu menambahkan Time pada 
Loyout Game yang kita buat. Untuk lebih jelasnya mari kita ikuti tahapan- 
tahapan seperti di bawah ini. 


Yang pertama, kita masukkan dulu Time pada bagian Layout Game. 

’h- m’ — — — 


Home 

Events 


CL X Cut f' Und0 * 

[h Copy 'T! Redo - 

Paste 

§ Delete 

^ Active configurations: All 

i O: Select All 

j i Select None 

^Displaying: HTML5 

Clipboard | Undo 

Selection 

Configurations 


t & 


e :r » 

_ Scirra Run Debug Export Start 

V£? Help store layout layout project Page 


Properties 9 > 

n 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Activelayer LayerO 
Unbounde... No 
B Layout Size 1708,960 
GE1 Margins 500, 500 
B Effects 
Add / edit 
Project Proper... 

More informat... 


Layout 1 x | Event sheet 1 


Effects 


Double-dick a plugin to create a new object type from: 



Description: Displays some text on the screen. - More heb on Text' 


f New project* 

i fir Layouts 
B Layout 1 
i Sw Event sheets 

liil Event sheet 1 
frr Object types 
fh/ Families 
Sa Sounds 
Music 
i Files 
Sa Icons 


j tSj Projects Layers 


Ali 'Layout 1' objects 


j Objects Tilemap 


Active layer: Layer 0 


Mouse: (500.0,163.0,0) Zoom: 100% 


Kemudian ganti nama Text menjadi Time seperti tampilan gambar di bawah 
ini. 
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Active layer: Layer 0 


Mouse: (-46.0, -6.0,0} 


Setelah itu mari kita menuju ke Event Sheet. Hal yang harus pertama kali 
kita lakukan adalah mendeklarasikan variabel dari Time dengan cara 
sebagai berikut. 

Klik kanan pada bagian Event Sheet kemudian pilih Add Global 
Variable. 

Selanjutnya masukkan nama variabel yang bisa mewakili. Sebagai 
contohnya kita gunakan nama VarTime untuk mewakili variabel Time. 
Jangan lupa untuk menentukan nilai value nya misalnya kita masukkan 
angka 60 yang berarti 60 detik. 



Mouse: (163.0, -17.0,0 
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Setelah kita memasukkan Variable Time sekarang waktunya kita 
mengatur logika pada system nya. 

Kita buat logika bahwa pada saat game di mulai, maka setiap 1 detik, 
system akan menghitung mundur waktunya di mana waktu tersebut 
nanti akan di tampilkan pada Layout Output. 


Berikut gambarannya setiap langkah-langkahnya : 



Active layer: Layer 0 


Mouse: (163.0, -17 X), 0) 



Active layer: Layer 0 


Mouse: (163.0, -17.0,0) 



SA6USAGAME 

Satu Guru Satu Game Edukasi 


Halaman 68 


micui 



















































































SA6USAGAME 

Satu Guru Satu Game Edukasi 


Halaman 69 


















































































flleff»b’"cit Ooino 



edukasi 


ft * cut 

1 [Q Copy 
Paste 

«■’> Undo - 

jjjj Delete 

X Active configurations:j 

^p|Svjtem 

A T i waktu 
Stirra.com 

'** Re do - 

i w2\ Select All 

: • Select None 

%Displaying: HTML5 


Forums 

Help 

Clipboard 

Undo 

Selection 

Configuration 


Online 


Properties 

:s Si 

B Layout properties 
Name Layout 1 

Event sh eet Event sh eet 1 
Activelayer LayerO 
Unbounde... No 
B Layout Size 1708,960 
B Margins 500, 500 
B Effects 
Add/edit 
Project Proper.. 

More informat. 


'J X / Layout 1/ Event sheet 1 x j 


Effects 

View 


Global number VarTime = >0 
-►0System On start of layout 


■P 


Run Debug Export Start 
layout layout project Page 

Preview Go , 


Parameters for waktu: Set text 


Enter the text to set the objecfs content to. 


Text |"Time - " & VarTime 


Help on expressions 


Projects 

a fjg New project* 

a Ear Layouts 

■ Layout 1 
a Event sheets 

IH Event sheet 1 
a fjr Objecttypes 
[Tj waktu 
fm Families 
Sounds 
Ev Music 
a E 0 Files 


L Projects Layers 


Ali 'Layout 1' objects 

i T i wattu 


Objects T 


Active layer: Layer 0 


Mouse: (115.0, -17.0,0) Zoom: 100% 



Active layer Layer 0 


Mouse: (115.0, -17.0,0) Zoom: 100% 


Sampai di sini, System sudah bisa menampilkan Time dengan nilai awal = 
60 detik. Selanjutnya kita akan melakukan proses pengurangan nilai Time 
pada setiap satu detik. 
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Active layer: Layer 0 


Mouse: (115.0, -17.0,0) Zoom: 100% 


Masukkan nilai pengurangannya sebesar 1 pada VarTime. 
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Selanjutnya proses memasukkan hasil pengurangan ke dalam TextTime. 
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Sekarang mari kita lihat hasilnya dengan menekan Run Layout. Dan inilah 
hasil yang akan kita dapatkan dimana game akan di awali dengan angka 
Time = 60 dan di setiap detik angka Time akan berkurang 1. 
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Bab 8 

Sound and Music 


8.1 FUNGSI SOUND AND MUSIC 

Didalam game, tidak akan seru tanpa adanya suara maupun lagu, karena 
perpaduan lagu dan suara sangatlah berpengaruh bagi popularitas sebuah 
game. 


Baiklah,seharusnya kalian sudah tau kan fungsi Sound 
kalau belum,silahkan liat screenshot dibawah ini. 

H u ^ T O X' ® * Construct 2 beta release r!75 - Layout 1 


& Music? 


nv^i 

S: 10 c H 

Undo» 

^ Redo - 

3 De|ete 

>2! Select Ali 



WMMI 


3 


^ Scirra.com 
Forums 
@ Help 


$ O A L» 

Scirra Run Debug Export 

Store layout layout project 


Properties 

J7 X 

’S £1 


B Layout prop. 


Name 

Layout 1 

Event sheet 

Event sheet 1 

Active layer 

Layer 0 

Unbounde... 

No 

El Layout Size 

1708, 960 

□ Margins 

500, 500 

□ 

Add / edit 

Effects 

Project Proper... 

View 

More Information 

Help 


Start 

Page 


Layout 1 X Event sheet 1 


SEBAGAIFOLBEB 
SOUi\l EFFECT 


SEBAGAI 
FOLBEB MUSIK 



- New project* 

B Jm Layouts 

(■j Layout 1 
B fm Event sheets 

IMI Event sheet 1 
fir Object types 
fm Families 


Objects | Tilemap fe Projects | Layers | 

Mouse: (700.0, 278.0,0) | Zoom: 100% 


8.2 INPUT SOUND AND MUSIC 

Pada pembahasan kali ini, kita akan membahas bagaimana caranya 
memasukkan sound dan music untuk membuat game yang kita buat 
menjadi lebih menarik lagi. 

Yang pertama seperti biasa kita persiapkan terlebih dahulu layar kerja 
seperti gambar di bawah ini. 
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X Cut lf' Undo * i Delete ^ Active configurations: Ali 

[f^Copy I Redo » I ;jt; Select Ali ^Displaying: HTML5 
i_ i Select None 

Clipboard | Undo | Selection | Configurations 


2“ 


Properties d 

SI 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active layer LayerO 
Unbounde... No 
0 Layout Size 500,500 
a Margins 500,500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


▼ Projects 


j New project* 

i Sa Layouts 

!■! Layout 1 
< Sst Event sheets 

1111 Event sheet 1 
Bv Objecttypes 
Families 
Sounds 



Kemudian kita siapkan Object gambar yang akan kita jadikan sprite. 




Paste 

Clipboard 


X Cut 

[[3 Copy 'H Re 


® Delete % Active configurations: All 

;i®; Select All %Displaying: HTML5 

Scirra.com 

’ ifc) Forums 

t 

O* B 

H 

i i Select None 

©Help 

Store 

layout layout project 

Page 

Selection Configurations 

Online 


Preview 

Go | 


Properties d 

1 = St 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active layer Layer 0 
Unbounde... No 
B Layout Size 500,500 
B Margins 
B Effects 
Add / edit 
Project Proper.. 

More informat. 



Mouse: (-53.0, -14.0,0) 


Berilah behavior solid untuk bola 1 dan 2, sedangkan untuk bola merah 
berilah behavior 8 directions. 
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Lanjut kita masukkan audio ke layar kerja. 


B 


W 

Vfew 

X cut ifNUndo- fDelete 
[£| Co p y 'l! Redo * I jigj Seled All 
j iSelectNo 

Clipboard | Undo [ Selection 


^ Active configurations: A 
^Displaying: HTML5 


_ Scirra t Run Debug Export Start 

O Help store | layout layout project Page 


H 


Properties d > 

•i U 

B Layout properties 
Name Layout 1 
Event sheet Event sheet 1 
Active layer LayerO 
Unbounde... No 
B Layout Size 500, 500 
B Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


Layout Size 

The size of the layout ar 



Doubleclick a plugin to create a new object type ffom: 


H 

L-S 

0S 



Background 




U 

IWI 

Keyboard 

0 

Mouse 

Touch 

4) 

Audio 

Geolocaton 

12 

User Media 

a 

Video 

Monetisation 





Name when inserted: Audio 

Description: play sound effects and music from files you've imported to Construct 2. - More helo on 


[ M Insert J j M Cancel J 


New project* 
to Layouts 
IMI Layout 1 
to Event sheets 
IH Event sheet 1 
to Object types 
te Families 
to Sounds 



Active layer Layer 0 


Mouse: (352.0,198.0,0) Zoom: 100% 


Jika kita sudah memasukkan Audio ke dalam layar kerja, kita baru 
bisa memasukkan sound dan music ke dalam library game kita. Sound 
maupun Music yang kita buat harus dalam extension ,m4a dan .ogg. Jika 
kita hanya memiliki file dalam bentuk ,mp3 maupun ,mp4, tidak perlu 
kuatir 
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karena ada banyak Software yang bisa kita gunakan untuk merubah ekstensi 
file salah satunya adalah dengan menggunakan Software Format Factory. 



Masukkan file yang kita inginkan melalui klik kanan pada sound dan pilih 
import sound begitu pula ketika kita ingin memasukkan music ke dalam 
library. Cukup klik kanan pada music dan pilih import music, lalu pilih file 
music yang kita inginkan. 



Klik import untuk memasukkan file yang sudah kita pilih. 
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Clipboard 


(T' Undo - 

jj$ Delete 

^ Redo - 

irjfi Select All 


: ! Select None 

| Undo 

| Selection | 

9 

x Layout1 


X Active configurations: A 


O 56 B ^ 


^ Forums 
_ Scirra 

<*# Help Store 


Run Debug Export Start 

layout layout project Page 

Preview 60 


Properties 

n 

B About 

Name New projec 

Version 1.0.0.0 
Description 

ID com.myco. 

Author 

Email 

Website http:// 

B Project settings 
First layout (default) 
Useloader... No 
Pixel roun... Off 
Preview eff... Yes 
B Window Size 500,500 
B Configuration Settings 
Preview br... (default) 
Fullscreen... Letterbox s... 
Fullscreen... High quality 
Use high-... Yes 
Orientations Any 
Enable We... On 
Sampling Linear 
Downscali... Medium q... 
Phvsire pn... Roy?D asm. 



* figr Objecttypes 
4 ) Audio 
Families 
j fjm Sounds 

[Jl Explosion l.m4a 
|ij Explosion l.ogg 
t fiv Music 

[i] MattOglseby - l.r : 
ijt MattOglseby -1.c 
a Bm Files 

Icons 



Objects Tilemap 


Approx. download: 1.3 mb memory use: 1.9 mb Events: 0 


Active layen Layer 0 


Mouse: (-186.0,490.0,0) Zoom: 100% 


Bisa kita lihat di gambar, kita sudah memiliki file sound dan music pada 
libray kita. Proses selanjutnya adalah mengaktifkan file tersebut ke dalam 
game melalui eventsheet. Aktifkan logika, jika system dijalankan maka 
music akan berjalan. Maka eventsheetnya adalah sebagai berikut. 


* I^Copy 
Paste 

(T' Undo - 

jjf Delete 

X Active configurations: All 

Redo - 

:^: Select All 

: i Select None 

%Displaying: HTML5 

Clipboard 

| Undo 

Selection 

Configurations 


S;::r 

_ Scirra Run Debug Export Start 

Help Store layout layout project Page 


Properties ? > 

’i H 

B Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active layer Layer 0 
Unbounde... No 
B Layout Size 500, 500 
B Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 




Layout 1 Event sheet 1 x 


To start adding events, right-click, double click, or 
Events are run from top to bottom once pertick (i.e. 

Right-click and select 'Help' for more infor 


▼ Projects 

=1J_ 


Double-dick an object to create a condition fforn: 


$ 4) • O O 


L Cancel 


[ Next 1 


Approx. download: 1.3 mb memory use: 2.2 mb Events: 0 


Active layer: Layer 0 


Mouse: (197.0, 47,0,0) Zoom: 100% 
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fit * cut 

[£|Copy 

Paste 

Clipboard 

f'Undo - 

'V Redo - 

Undo 

® Delete 

Select All 

: I Select None 

Selection 

X Active configurations: All » 

%.Displaying: HTML5 

Configurations 

Scirra.com 4^ 

^ Forums 
_ Scirra 

He| P Store 

Online 

OfcS 

Run Debug Export 
layout layout projed 
Preview 

A 

Start 

Page 

Go 


Properties d X 

Layout 1 ’ Event sheet 1 X | 




▼ Projeds 3 X 


El Layout properties 
Name Layout 1 

Event sh eet Event sh eet 1 
Active layer LayerO 
Unbounde... No 
El Layout Size 500, 500 
El Margins 500, 500 
El Effects 

Add/edit Effects 
Project Proper... View 
More informat... Help 


To start adding events, right-click, double click, or 
Events are run from top to bottom once per tick (i.e. 

Right-click and select 'Help' for more infor 


Triggered at the start of the current layout. 


0Pickall 
^frPick by evaluate 
jjjPick overlapping point 


|J|Pick by comparison 
^Pick nth instance 
APick random instance 


31 On load complete 
J|On save complete 


JJOn load failed 
J|On save failed 


0Bse 

$Is on mobile device 
$Trigger once while true 

Start & end 
jJ|On end of layout 
jjjOn start of layout 


$Isin preview 
$Is on platform 


jJ|On loader layout complete 


Help on 'System' conditions 


| Objects I Tilemap 


Approx. download: 1.3 mb memory use: 2.2 mb Events: 0 


Active layer: Layer 0 


Mouse: (197.0, -17.0,0) Zoom: 100% 



1 l£)Copy 


Clipboard 


f'Undo - 

® Delete 

'V Redo - 

Select All 

| Undo 

•SeledNone 


Seledion 


X Active conflgurations: 
%Displaying: HTML5 


_ Scirra Run Debug Export Start 

He| P Store layout layout projed Page 

Online Preview Go 


Properties > 

:= 

El Layout properties 
Name Layout 1 

Event sheet Event sheet 1 
Active layer LayerO 
Unbounde... No 
E) Layout Size 500, 500 
El Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


1 System On start of layout Add action 


Double-dick an object to create an action from: 



Objects Tilemap 


Approx. download: 1.3 mb memory use: 2.2 mb Events: 1 


Active layer: Layer 0 


Mouse: (197.0, -17.0,0) Zoom: 100% 
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M —J [£)Copy 

Paste 

Undo - 

p Delete 

X Active configurations: All 

Redo - 

iift Select All 

jSelectNone 

^Displaying: HTML5 

Clipboard 

Undo 

Selection 

Configurations 

Properties 

? X | Layout 1 

Event sheet 1 x | 


^ & B 


Forums 
_ Scirra 

<f) He| P Store 


Run Debug Export 
layout layout project 
Preview 


:i Si 

El Layout properties 
Name Layout 1 

Event sheet Event sheet 1 


jg} System 



Active layer 

Layer0 


Unbounde... 

No 

El 

Layout Size 

500, 500 

E) 

Margins 

500, 500 

B 

Effects 



Add / edit 

Effects 

Project Proper... 

View 

More informat... 

Help 


^>)Add ring mod effect 
^))Remove all effects 

y Add tremolo effect 

4)Set effect parameter 

^>)Schedulenextplay 

4'jPlay atobject 
^))Play atposition 
^>)Set listener object 

^>)Play at object (by name) 

^))Play at position (by name) 

4)Set listener Z 

^>)P«ay 

4)Preload 

4)Seekto 

■4 >)Set master volume 
4>)Setpaused 

4)Setsilent 

^>)Stop 

^))Play (by name) 

4)Preload (by name) 

4)Setlooping 

4) Set muted 

4>)Setplaybackrate 

4) Set volume 

4) Stop all 


Pilih suara yang diiginkan. 


^ Cut Undo - 

Copy Redo * 

® Delete 

X Active configurationsij 

'^System 

iijjl Select All 

^Displaying: HTML5 

• ^Forums 

Paste 

Clipboard Undo 

i Select None 

Selection 

Configuration 

®He,p 

s | Online 

Properties ? X Layout 1 Event sheet 1 X 



:s Si 

E) Layout properties 


Name 
Event sheet 
Active layer 
Unbounde... 

E) Layout Size 
El Margins 
B Effects 

Add/edit Effecl 
Project Proper... View 
More informat... Help 


Layout 1 
Event sheet 1 
Layer0 
No 

500, 500 
500, 500 


O jjg| System i On start of lay< 


Parameters for Audio: Play 





Objecttypes 
^>) Audio 
0 Sprite 
4) Sprite2 
4) Sprite3 
Families 
Sounds 

j J>j Explosion l.m4a 
|fj Explosion l.ogg 
Music 

|J] MattOglseby - l.i 
j»i MattOglseb y - l.i 


m 


itel 

ite3 


Approx. download: 1.3 mb memory use: 2.2 mb Events: 1 


Active layer. Layer 0 


Mouse: (197.0, -17.0,0) 


Pada tahapan ini kita sudah bisa mendengarkan suara musik jika game 
mulai dijalankan. Selanjutnya kita akan membuat logika baru, jika bola 
merah menabrak bola 1, maka akan muncul suara ledakan dan bola akan 
hancur. Perhatikan tahapannya di bawah ini. 
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Approx. download: 1.3 mb memory use: 2.2 mb Events: 1 


Adive layen Layer 0 


Mouse: (197.0, -17.0,0) Zoom: 100% 
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OfcB ^ 

Run Debug Export Start 

layout layout project Page 

Preview 60 


ttOglseby -1 not looping at volume 0 dB (tag " 


Parameters for Sprite: On collision with another object 


4 fog Object types 
4>) Audio 
# Sprite 
Sprite2 
4) Sprite3 
fS r Families 
* Sa Sounds 

^ Explosion l.m4a 
<* Explosion l.ogg 
4 Music 

j?] MattOglseby - l.r 
> |«,j MattOglseb y - l.c w 


Select the object to test for a collision with. 


<dicktochoose> 


Cancel | Help on expressions 


s Layers 


m 


| Approx. download: 1.3 mb memory use: 2.2 mb Events: 1 


Active layer: Layer 0 


Mouse: (197.0, -17.0, 0) 
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B*-'* © & 

Home ! View 

fti 




Paste 

Clipboard 


** Undo ’ 

® Delete 

X Active configurations: All ’ 

-Tl Redo • 

\r2\ Select All 

^Displaying: HTML5 


i Select None 


| Undo 

Selection 

Configurations 


$:r m 

_ Scirra Run Debug Export Start 

©Help store layout layout project Page 

Online Preview 60 


Properties 9 > 

’i n 

El Layout properties 
Name Layout 1 

Event sh eet Event sh eet 1 
Active layer LayerO 
Unbounde... No 
El Layout Size 500, 500 
El Margins 500, 500 
El Effects 

Add/edit Effects 
Project Proper... View 
More informat... Help 


Layout 1 Event sheet 1 X 


1 System On start of layout 


JSprite | On collision with © 
Sprite2 


^)) Audio Play MattOglseby -1 not looping at vo Add action 


Advanced: Effects 
^>)Add analyser effiect 
cj'jAdd convolution effect 
t(i)Add distortion effect 
^>)Add flanger effect 
^>)Add mute effect 
^))Add ring mod effect 
^))Remove all effects 

Advanced: Other 
^))Schedule next play 

Advanced: Positioned sound 
^ i) Play at object 
e^))Play at position 
4>)Set listener object 

General 

4>)Play 

iJ»)Preload 


^>)Add compressor effect 
^>)Add delay effect 
^>)Add filter effect 
^>)Add gain effect 
^>)Add phaser effect 
^>)Add tremolo effect 
^>)Set effect parameter 


^))Play at object (by name) 
^>)Play at position (by name) 
^>)Set listener Z 


i>)Play (by name) 
^>)Preload (by name) 


Help on 'Audio' actions 


| Objects I Tilemap 


Approx. download: 1.3 mb memory use: 2.2 mb Events: 2 


Active layer: Layer 0 


Mouse: (197.0, -17.0,0) Zoom: 100% 
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Approx. download: 1.3 mb memory use: 2.2 mb Events: 2 


Activelayer: LayerO 


Mouse: (197.0, -17.0,0) Zoom: 100% 


Lakukan hal yang sama pada sprite 3 sehingga hasilnya seperti di bawah ini. 
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$ B 'O* ^ 

Home View 


Construct 2 - Event sheet 1 




Xcut 

Paste 

Undo - 

I Delete 

X Active configurations: All 

Redo •» 

iijjj Select All 

: I Select None 

^Displaying: HTML5 

Clipboard 

Undo 

Selection 

Configurations 

Properties 

a x Layout 1 

Event sheet 1 X 


fj Scirra.corr 
Forums 


^ ©*S G 


'S zi 
B Layout properties 
Name Layout 1 

Event sh eet Event sh eet 1 
Active layer LayerO 
Unbounde... No 
El Layout Size 500, 500 
El Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


System On start of layout 

^)) Audio 



'O ^Sprite On collision with Q 

Sprite2 

g) Audio 
4) Sprite2 


'O ^Sprite On collision with 

Sprite3 

4>)Audio 
Q Sprite3 




Play MattOglseby -1 not looping at volume 0 dB (tag " 


T Objecttypes 
^)) Audio 
0 Sprite 
Sprite2 
Sprite3 
W Families 
W Sounds 
2] Explosion l.m4a 
g Explosion l.ogg 
j t Music 

jij MattOglseby - l.r 
MattOglseby - l.c » 

ZD 


Projects Layers 

Objects 

d X 

All 'Layout 1' objects 

m 

Sprite 


Sprite2 


SpriteS 



Objects 


Approx. download: 1.3 mb memory use: 2.2 mb Events:3 


Active layer Layer 0 


Mouse: (197.0, -17.0,0) Zoom: 100% 


Nah sekarang coba Anda jalankan Game nya. Ketika game mulai dijalankan 
akan munculmusik dan ketika bola merah menabrak bola 1 dan 2, maka akan 
muncul suara ledakan. 

Silahkan berkreasi dengan suara-suara lainnya. 
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Bab 9 

STORY BOARD 


9.1 PENGERTIAN STORY BOARD 

Storyboard adalah sketsa gambar yang disusun berurutan sesuai dengan 
naskah, dengan storyboard kita dapat menyampaikan ide cerita kita kepada 
orang lain dengan lebih mudah, karena kita dapat menggiring khayalan 
seseorang mengikuti gambar-gambar yang tersaji, sehingga menghasilkan 
persepsi yang sama pada ide cerita kita. 

Sebelum membuat Story Board, ada baiknya kita membuat Flowchart 
System. Flowchart atau Bagan alir adalah bagan (chart) yang menunjukkan 
alir (flow ) di dalam program atau prosedur sistem secara logika. Bagan alir 
(flowchart) digunakan terutama untuk alat bantu komunikasi dan untuk 
dokumentasi. 

Jenis jenis Flowchart 

Ada beberapa jenis flowchart diantaranya: 

1. Bagan alir sistem (systems flowchart). 

2. Bagan alir dokumen (documentflowchart). 

3. Bagan alir skematik (schematic flowchart). 

4. Bagan alir program (program flowchart). 

5. Bagan alir proses (process flowchart). System Flowchart 

System Flowchart 

System flowchart dapat didefinisikan sebagai bagan yang menunjukkan arus 
pekerjaan secara keseluruhan dari sistem. Bagan ini menjelaskan urut- 
urutan dari prosedur-prosedur yang ada di dalam sistem. Bagan alir sistem 
menunjukkan apa yang dikerjakan di sistem. 

Komponen di dalam Flowchart System. 

Simbol dan Notasi Flowchart 

Dipakai sebagai alat Bantu menggambarkan proses di dalam program. 
Dan dibagi menjadi tiga kelompok : 

Flow Direction Symbols 

dipakai untuk menggabungkan antara symbol yang satu dengan symbol 
lainnya 



Symbol Off-line Connector ( Simbol untuk keluar/masuk prosedure 
atau proses dalam lembar/halaman yang lain) 


O Symbol Connector (Simbol untuk keluar/masuk prosedur atau 
proses dalam lembar/halaman yang sama) 
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Processing symbols 

Menunjukkan jenis operasi pengolahan dalam suatu 
prosedur 


SymbolProcess (Simbol yang menunjukkan pengolahan 
yang dilakukan oleh komputer) 


Symbol Manual Operation (Simbol yang menunjukkan 
pengolahan yangtidakdilakukan oleh komputer) 

V-' Symbol Decision (Simbol untuk kondisi yang akan 
menghasilkan beberapa kemungkinan jawaban/aksi) 

Symbol Predefined Process (Simbol untuk 
mempersiapkan penyimpanan yang akan digunakan sebagai 
tempat pengolahan di dalam storage) 




Symbol Terminal (Simbol untuk permulaan atau akhir 
dari suatu program)) 

V Symbol Off-line Storage (Simbol yang menunjukkan bahwa 
data di dalam symbol ini akan disimpan) 


■-J Symbol Manual Input (Simbol untuk pemasukan data 

secara manual on-line 
keyboard) 



Symbol Keying Operation (Simbol operasi dengan 
menggunakan mesin yang mempunyai keyboard) 
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Input-output symbols 

menyatakan jenis peralatan yang digunakan sebagai media input 
atau output. 


Symbol input-output (Symbol yang menyatakan proses 
input dan output tanpa tergantung dengan jenis peralatannya) 

Q Symbolmagnetic-tape unit (Symbol yang menyatakan input 
berasal pita magnetic atau output disimpan ke pita magnetic) 



Symbol punched card (Symbol yang menyatakan 


input berasal dari kartu atau output ditulis ke kartu) 



Symbol disk and on-line storage (Symbol untuk 
menyatakan input berasal dari disk atau output disimpan ke disk) 



Symbol display (Symbol 


yang menyatakan peralatan 


output yang digunakan yaitu layar, plotter, printer, dan sebagainya) 



berasal dari dokumen dalam bentuk kertas atau output dicetak ke 
kertas) 

Pedoman Membuat Flowchart 

Bila seorang analis dan programmer akan membuat flowchart, ada 

beberapa petunjuk yang harus diperhatikan, seperti: 

1. Flowchart digambarkan dari halaman atas ke bawah dan dari kiri 
kekanan. 

2. Aktivitas yang digambarkan harus didefinisikan secara hati-hati dan 
definisi ini harus dapat dimengerti oleh pembacanya. 

3. Kapan aktivitas dimulai dan berakhir harus ditentukan secara jelas. 

4. Setiap langkah dari aktivitas harus diuraikan dengan menggunakan 
deskripsi kata kerja. 

5. Setiap langkah dari aktivitas harus berada pada urutan yang benar. 

6. Lingkup dan range dari aktifitas yang sedang digambarkan 
harusditelusuri dengan hati-hati. Percabangan-percabangan yang 
memotong aktivitas yang sedang digambarkan tidak perlu digambarkan 
pada flowchart yang sama. Simbol konektor harus digunakan dan 
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micui 















percabangannya diletakan pada halaman yang terpisah atau hilangkan 
seluruhnya bila percabangannya tidak berkaitan dengan sistem. 

7. Gunakan simbol-simbol flowchart yang standar. 

CONTOH PENERAPAN FLOWCHART PADAGAME 
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Dari gambar Flowchart di atas dapat kita lihat bahwa setelah masuk ke 
aplikasi game, kita akan di berikan dua pilihan yaitu instruksi yang 
berisi petunjuk memainkan game. Jika kita lanjutkan maka kita akan 
menuju ke mulai di mana kita akan di arahkan untuk memulai game level 1. 
Jika kita dapat menyelesaikan permainan di level 1, maka kita akan di bawa 
kembali ke level 1. Jika kita berhasil menyelesaikan level 1 dengan baik maka 
kita akan di bawa ke level 2. Di level 2 

ini pun jika kita berhasil menyelesaikannya, maka kita akan di bawa ke 
loyout winner. Tetapi jika kita gagal, maka kita akan di bawa kembali ke level 
2 . 



SA6USAGAME 

Satu Guru Satu Game Edukasi 


Halaman 91 
















9.2 STORY BOARD GAME EDUKATIF 


Setelah kita membuat diagram alir atau Flowchart, maka langkah 
selanjutnya adalah kita akan membuat Story Board game yang akan kita 
buat. Story Board merupakan rancangan awal dalam pembuatan Game, jadi 
masih di mungkinkan terjadi perubahan pada game akhirnya. 

Untuk lebih jelasnnya mari kita lihat dalam tampilan Story Board berikut ini. 


STORY BOARD GAME EDUKATIF 
"GAME TIK PINTAR" 
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mcmb’ a ot Game 



edukasi 



0 Di bagian Petunjuk Level 1 ini, pemain 

Manakah yang termasuk ke 

akan di beri petunjuk tentang apa 

dalam alat input? 

yang harus di cari di Level 1. 

Silahkan kalian arahkan 

0 Untuk masuk ke Level 1 pemain di 

bola ke gambar alat input 

persilahkan untuk mengklik tombol 

yang kamu anggap benar... 

Lanjut 


0 Untuk kembali ke menu awal pemain 


bisa mengklik tombol kembali 


LAYER PETUNJUK LEVEL 1 


(m SCORE = O 

..T. ■ * WAWA * S 




■Q 


-M* 



LAYER LEVEL 1 


> Pada Level 1 ini pemain 
dipersilahkan 

untuk menggerakkan bola hijau 
dengan menggunakan tombol panah 
atas, bawah, kanan, kiri 

> Jika bola bertabrakan dengan 
jawaban 

yang benar maka score akan 
bertambah 10 poin 

> Jika bola bertabrakan dengan 
jawaban 

yang salah maka score akan berkurang 
10 poin 

> Jika bola bertabrakan dengan lebah 
maka nyawa akan berkurang 1 poin 

> Jika bola bertabrakan dengan 
bintang 

emas maka score akan bertambah 20 
poin 

> Jika score lebih dari atau sama 
dengan 

50, maka game akan menuju ke 
Petunjuk Level 2 

> Jika bola keluar dari layout maka 
game 

akan memulai level 1 dari awal atau 
restart layout 
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mcmb"ot Game 




MVEI z 



LAYER PETUNJUK LEVEL 2 



LAYER LEVEL 2 


> Pada bagian ini peserta akan 
mendapat petunjuk untuk masuk ke 
Level 2 

> Gambar ikon panah biru ke kanan 
adalah untuk melanjutkan ke Level 2 
sedangkan gambar ikon panah ke kiri 
adalah untuk menuju ke level 
sebelumnya (level 1) 

> Pada bagian ini tombol di klik 
dengan 

menggunakan mouse 


^ Pada level 2 ini akan di awali dengan 
proses loading yang di tandai dengan 
berkurangnya gambar ikon kotak 
kuning sebagai indikator untuk 
menunjukkan bahwa game akan 
dimulai 

r* Pada level 2 ini pemain akan di ajak 

untuk menentukan mana saja gambar 

yang termasuk ke dalam alat output 

dari komputer 

^ Jika jawaban benar akan 

mendapatkan score 10 poin 

r* Jika jawaban salah maka score akan 

berkurang 10 poin 

r* Jika bertabrakan dengan peluru 

maka 

pemain akan mendapatkan tambahan 
nyawa 1 

r* Jika bertabrakan dengan lebah 
mana 

nyawa akan berkurang 1 

^ Jika score sudah lebih dari atau 

sama 

dengan 75 maka pemain akan di bawa 
menuju ke layer Petunjuk Level 3 
r" Untuk menggerakkan player 
menggunakan panah atas, bawah, 
kanan, kiri 

r" Tombol panah ke kiri adalah untuk 
restart layout. 
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mcmb"ot Game 





PETUNJUK LEVEL 3 



Pilihlah jawaban yang benar! 


U tang berlungsi untuk memasukan data atau perintah ke dalam komputer adalah... 



Udrom C. Input detke 

- 

B. Flopp\disk 0. Output device 

=■ 

■ 

Score ■ 0 


LEVEL 3 


^ Pada bagian ini pemain akan di 
beri 

petunjuk untuk bermain di Level 3 
^ Ikon Lanjut digunakan untuk 
melanjutkan game ke level 3 
^ Ikon kembali di gunakan untuk 
kembali ke level 2 
^ Untuk mengeksekusi tombol 
menggunakan mouse 


P Pada level 3 ini pemain akan diuji 
wawasannya mengenai 
macammacam 

peralatan komputer dalam 

bentuk kuis pilihan ganda 

'r’ Untuk menentukan pilihan pemain 

harus menggunakan mouse untuk 

mengklik jawaban yang benar 

^ Jika jawaban benar maka akan 

muncul 

ikon centang dan setelah 2 detik 
game 

akan menuju ke layer juara 
P Jika jawaban salah akan muncul 
ikon 

silang dan game akan menuju kembali 
ke layer Petunjuk Level 3 



P Pada bagian ini, pemain akan 
mendapati tampilan layer juara yang 
menunjukkan bahwa pemain telah 
berhasil menuntaskan semua level di 
game ini 


LEVEL JUARA 
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9.3 ABSTRAKSI G AM E 

Setelah membuat Story Board, ada baiknya kita juga membuat Abstraksi 
Game untuk lebih menjelaskan tentang jalannya Game seperti tampilan di 
bawah ini. 

Ini adalah contoh abstraksi game TIK pintar pada story board di atas. 

ABSTRAKSI GAME 

Game ini adalah salah satu game edukatif yang bertujuan untuk 
memberikan pengalaman belajar yang berbeda kepada siswa. Sengaja di 
pilih media game karena mayoritas siswa sangat menyukai game 
dibandingkan dengan pelajaran. Menjadi sebuah tantangan untuk 
menyajikan game edukasi dengan cara yang berbeda yang berorientasi pada 
kesukaan siswa. Software yang digunakan adalah Software construct 2 yang 
memang dikhususkan untuk pembuatan game. Untuk source gambar, 
maupun suara ada yang penulis ambil dari internet (sumber terlampir di 
daftar pustaka) sebagian lagi bawaan dari Software construct 2 berlisensi 
tetapi juga ada yang dibuat melalui perpaduan microsft word, paint, dan 
Photoshop. Ada juga yang penulis buat manual menggunakan gambar 
tangan dan crayon manual kemudian di foto dan di edit menggunakan 
Photoshop sebagai tokoh gambarnya. Untuk suara ada yang penulis rekam 
menggunakan hp dan di convert menggunakan format factory ke dalam 
ekstensi.m4a dan .ogg agar bisa di gunakan di construct 2. 

Game ini sengaja di sajikan dengan model yang berbeda di setiap 
levelnya. Pada level 1 digunakan bola yang di buat sederhana dengan 
menggunakan microsoft word dengan tujuan agar game ini bisa di sukai 
oleh banyak kalangan termasuk guru yang tidak ahli menggunakan IT 
sekalipun. Background yang di gunakan pun juga menggunakan background 
yang di share bebas di internet (sumber terlampir di daftar pustaka). Game 
dibuat mudah digunakan siswa hanya dengan menggerakkan panah di 
keyboard untuk menggerakkan player dan mencari mana saja gambar yang 
termasuk ke dalam peralatan input. Walaupun dalam konsep bermain, 
tetapi siswa juga belajar karena siswa tidak akan bisa melanjutkan game 
jika nilainya tidak memenuhi syarat. 

Pada level 2, sedikit di berikan nuansa yang berbeda. Menggunakan konsep 
shooter game tetapi tanpa efek menembak. Karena penulis berusaha untuk 
menghindari unsur kekerasan dalam game ini. Tetap menggunakan panah 
untuk menggerakkan obyek player tetapi ada tambahan nyawa dalam 
bentuk roket. Di level ini game diawali dengan proses loading, kemudian 
muncul berbagai macam peralatan komputer, tetapi siswa di ajak untuk 
mencari obyek yang termasuk ke dalam peralatan output. Kemudian 
peralatan tersebut akan hilang sesaat dan muncul dengan waktu yang 
berbeda-beda untuk mengganggu konsentrasi pemain.Di level ini penulis 
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tetap menggunakan lebah sebagai musuh yang bertugas untuk mengurangi 
nyawa pemain. Level akan otomatis naik jika nilai lebih dari atau sama 
dengan 75. 

Pada level 3, penulis mencoba untuk memberikan variasi game yang 
berbeda lagi dengan menggunakan konsep multiple choice. Dalam 
pengembangannya nanti game ini bisa di gunakan sebagai proses 
ulangan harian yang sangat menarik bagi siswa karena ulangan di sajikan 
dalam bentuk game. 
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Bab 10 


Contoh Pembuatan Game 
dengan Contruct 2 


10.1 MEMBUAT GAME SEDERHANA 

Pada bab ini kita akan mencoba untuk membuat Game sederhana, dimana 
yang menjadi tokoh Player adalah Sprite pesawat, dan ketika pesawat 
menabrak Sprite batu meteor maka batu meteor akan meledak. Pada saat ini 
Sprite ledakan akan menempati posisi dari meteor. Setiap pesawat 
menabrak meteor maka Score akan bertambah 10 point. 


Yang kita gunakan sebagai tokoh musuh adalah adanya Sprite pesawat 
musuh yang kita susun secara acak di Layout dimana setiap kali pesawat 
menabrak pesawat musuh maka nyawa akan berkurang 1 point. Kita akan 
memberikan point awal pada nyawa sebesar 5 Point. 


B - 




Construct 2 - Layout 1 “ 


View Events 


O 

O 


X™ VMM»* 
[fo Copy ^ Redo • 

jjf Delete 
:■£! Select All 

X Active configurations: All 
%Disp!aying: HTML5 

' ^ Foruras 


O&B 

A 

Paste 

i | Select None 

Q Help 

Store 

Run Debug Export 
layout layout project 

Start 

Page 

Clipboard [ Undo 

Selection 

Configurations 

Online 


Prevlew 

Go 



Untuk lebih jelasnya mari kita ikuti setiap tahapannya sebagai berikut: 
Pertama-tama, siapkan ukuran Layout dan juga Windows sebesar 1000,500 
px.Kemudian rubah nama pada Layout menjadi Game dan Eventsheet 
menjadi ESGame. 
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Construct 2 - Game 




= ® S J 

e O 


S 


Xc*it 

[QCopy 


Clipboard 


■f' Undo » 

m Redo - 

Undo 


§ Delete ^ Actrve configurations: Ali ». 

iijf: Select All %Displaying: HTML5 


i JSelectNone 
Selection 


Configurations 


_ Scirra Run Debug Export Start 

@Help store ' layout layout project j Page 

Online Preview Go 



Selanjutnya kita masukkan Background ke dalam Layout. 



Pada proses memasukkan Background kita perlu mengunci layer 
Background agar pada saat kita memasukkan obyek Sprite, Background 
tidak akan terpengaruh. 


Caranya cukup klik Menu Layers dan kita klik gambar gembok atau kunci 
kemudian kita rename dan kita ganti nama menjadi Background. 
Selanjutnya kita tambahkan Layer kembali dengan menekan gambar + 
sehingga kita akan mendapatkan 1 Layer baru kembali. Kita rubah dulu layer 
ini dengan nama game. Di Layer Game inilah kita akan melakukan proses 
input sprite yang akan kita gunakan dalam Game. 


Lanjut kita akan mulai memasukkan Sprite ke dalam Layout. Penulis 
asumsikan bahwa sudah mengetahui proses memasukkan Sprite karena kita 
sudah membahasnya pada bab sebelumnya. 
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@ B ^^06” 
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e View 

Events 


a * cut 

iUndo ' 

3 Delete 

X Active configurations: All 

IfrCopy 

Redo ^ 

lift Select All 

%Displaying: HTML5 



; Select None 


Clipboard 

Undo 

| Selection 

Configurations 

Properties 


X / Game > 

( i ESGame 


Construct 2 - Game 


R “ Sit O 5& Q w 


* Forums 


Run Debug Export 
layout layout project | Page 
Preview I Go 


$3 _ | 

e & 


:s Si 

G Frame properties 
Framespeed 1 
More informat... Help 



_J 

Animation frames (3) 

■ 

j 

<h 

0 1 

o 

2 


Active layer: game 


Mouse; [128.0, 207.0,0) 


Supaya menarik, gambar pesawat akan kita berikan animasi warna dengan 
cara memberikan warna yang berbeda-beda pada tiap Animation Frame. 
Jika masih bingung silahkan buka bab sebelumnya. 


@ 0K 




Construct 2 - Game 


e © 


fk Xcn. 

^ (Q Copy 
Paste 

Clipboard 

IT* Undo ” 

Undo 

j® Delete 

!■£! Select All 
[ J Select None 
Selection 

X Active configurations: All - 

%Displaying: HTMLS 

fJscirra.com ^ 
^ Forums 
©Help Store 

Run Debug Export 
layout layout project 

Start 

Page 

Go 


Properties 

d X 

Game > 

: ESGame 





Projects P X 


A £ar New project' > 


B Layout properties 
Name Game 
Event sheet ESGame 
Active layer game 
Unbounde... No 
® Layout Size 1000,500 
G Margins 500,500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 



Objects Tilemap 


Mouse; [12.0, -7.0,0) 


Atur nama Sprite dengan nama pesawat pada tabel Properties yang ada di 
kanan bawah. Setelah itu klik dobel gambar pesawat agar kita dapat 
mengatur percepatan dan pengulangan gerakan animasinya. 



SAGUSAGAME 

Satu Guru Satu Game Edukasi 


Halaman 100 











































































& B ** • O * * 

Events 



Construct2 - Game 

e © 

XCut 

^—1 IJ5 Copy 

Paste 

Clipboard 

r* Undo * 

Redo * 

Undo 

S Delete 
iijfi Select All 

: Select None 

Selection 

^ Active configurations: All 
%Displaylng: HTML5 

Configurations 

Scirra.com 
^ Forums 
©Help store 

Online 

O&B 

Run Debug Export 
layout layout project 

A 

Start 

Page 

Go 



Properties 

•1 zl 




Speed 

10 


Loop 

Yes 

H 

Repeat co... 

1 


Repeat to 

0 


Ping-pong 

No 



Repeat the animation forever. 



Animation frames (3) 


<sl> 

0 1 

2 


Mouse: (-3XI, 405.0,0) 


Selanjutnya kita berikan behavior: 8direction dengan Direction: 4Direction 
dan SetAngle: No 

■Z 9 

e 


X Cut 
[ftCopy 


■ne [ View 

Events 

r'Undo * 

j® Delete 

'~M Redo - 

jigj Select All 


LJ Select None 

Undo 

| Selection | 


e © 




Debug Export 
tayout layout project 


Angle 0 

Opacity 100 

IB Position 412,253 

IB Size 112,75 

B Instance variables 
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Langkah berikutnya adalah memasukkan Sprite meteor yang kita beri 
behavior: Solid. Perhatikan tampilan gambar berikut ini. 


» H - 






[£} Copy 


0 Delete X Active configurations 

jffiSelectAII I %Displaytng: HTML5 


S;::r $ o * b a 

Scirra Run Debug Export Start 

Help Store layout layout project ; Page 



Silahkan anda Copy dan Paste gambar meteor sehingga kita punya 
beberapa tampilan meteor seperti gambar di bawah ini. 



Construct2 - Game 


Home | View Events_ 


e © 


e> 


(£3 Copy 





jtfiSelectAII 

■ i Select None 

X Active configurations: A, 1 - 

%Oisplaying: HTML5 

^ Scirra.com ^ 
G Help store 

Run Debug Export 
layout layout project 
Preview 

A 

Start 

Page 

Go 


Properties 1 

•5 n 

El Layout properties 
Name Game 
Event sheet ESGame 
Active layer game 
Unbounde... No 
B Layout Size 1000,500 
El Margins 500.500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 



Objects! Tilema 


Mouse: (-0.0,438.0,0) 


Kemudian silahkan anda memasukkan Score dalam bentuk Text dan juga 
Nyawa juga dalam bentuk Text. 
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^Displaying: HTML5 
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Clipboard Undo 
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Properties 
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Layer game 

Opacity 100 
0 Position 772,12 
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0 Instance variables 

Add / edit Instance va... 

S Behaviors 

Add / edit Behaviors 
0 Effects 

Blend mode Normal 
Add / edit Effects 
0 Container 

No contai... Create 
0 Properties 

Text SCORE = 

In'rtial visib... Visible 
Font Arial(12) 

Color □255,2^- 

Horizontal... Left 
Vertical ali... Top 
Hotspot Top-left 


New project* 

fr Layouts 
[■I Game 
fm Event sheets 
1111 ESGame 
fm Object types 
| background 
meteor 
) t pesawat 

Br Families 
Tam Sounds 



Pada gambar di atas, kita sudah memasukkan Text Score dimana Score nanti 
akan dihitung ketika Player mendapatkan poin. Selanjutnya kita juga akan 
memasukkan Sprite Nyawa seperti gambar di bawah ini. 
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e View 

Events 
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' 55 Copy 
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1 r* Undo - 
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jj| Delete 

Select All 
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%Displaying: HTML5 
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Run Debug Export 
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Properties 
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- 

Projects d X 
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Opacity 100 

0 Position 774,40 

0 Size 120,30 

0 Instance variables 
Add/edit 
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New project* 
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■ Game 
fm Event sheets 


Add / edit Effects 
0 Container 
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0 Properties 

Text NYAWA = 

Initial visib... Visible 
Font Arial(12) 

Color □ 255,25... 
Horizontal... Left 
Vertical ali... Top 
Hotspot Top-left 
Wrapping Word 



Jika sudah, kita juga perlu memasukkan tokoh ledakan agar ketika pesawat 
menabrak meteor, kita juga bisa memberikan efek ledakan agar lebih 
menarik. 
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Kita akan meletakkan ledakan ini di bagian luar dari Layout karena kita 
hanya menempatkan ledakan ini pada saat pesawat menabrak meteor. Jadi 
tidak kita tampilkan bersamaan dengan tampilan Layout Game. 



Agar lebih menantang, kita akan meletakkan musuh berupa pesawat musuh 
yang berfungsi untuk mengurangi nyawa pada Player. 
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" Construct 2 - Gami 
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• Select None 


Undo Selection 
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Properties P 
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B Object type properties 
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10 


Global 
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S Position 
B Slze 
B Instance variables 
Add / edit 
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B Effects 

Blend mode Normal 
Add / edit Effects 

B Container 

No contai... Create 
B Properties 

Animations Edit 
S'ize Makel:l 





j Approx. download: 300 kb memory i 


Kemudian kita Copy dan Paste sebanyak nyawa yang akan di kurangi. 
Karena pada saat nyawa tinggal nol, kita akan membuat Game melakukan 
proses Restart Loyout. 



Construct 2 - Game 1 
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Paste 
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X Cut irv Undo * 

[£]) Copy '■* Redo - 


§ Delete 

;ij{; Select All 
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X Active configurations: All 
^Displaying: HTML5 
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Scirra 1 Run Debug Export Start 

Store layout layout project I Page 
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Approx. download; 300 kb memory use: 6.2 mb Events: 4 


Active layen game 


TP '""g H| 

t & 



4ew project* 

W Layouts 
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U Event sheets 
IHI ESGame 
■r Object types 
| background 
O ledakan 
^ meteor 
lEJ musuh 

I pesawat 
[t] score 


musu h 

i T i n y awa 

vl J /P esawat 


| Objects | Tilemap 


Mouse: (-169.0, 233.0,0) Zoom: 100% 


Semua Sprite sudah kita masukkan, sekarang kita akan melanjutkan ke 
proses mengatur EventSheet. Yang pertama silahkan anda memasukkan 
Global Variable untukScore dan Nyawa dengan nilai awal Score adalah 0 dan 
nilai awal dari Nyawa adalah 5. Jangan lupa untuk menampilkan Score dan 
Nyawa pada tampilan Layout. 
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Construct 2 - ESGame 


PKuSIH Home View Events 
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%Displaying: HTML5 
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B Layout properties 
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Event sheet ESGame 
Active layer game 
Unbounde... No 
E) Layout Size 1000,500 
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B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 
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System On start of layout 
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f New project* 
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| background 
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t' Projects Layers 
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s, * . pesawat 
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| Objects [ Tilemap 


Approx. download: 300 kb memory use: 6.1 mb Events: 3 


Mouse: (-56.0, -10.0,0) 


Kemudian kita akan melakukan pengaturan logika, jika pesawat menabrak 
meteor, maka meteor akan hancur dan ledakan akan menempati posisi 
meteor. Selanjutnya System akan menunggu selama 1 detik untuk 
mengembalikan. 

ledakan ke posisi semula. System juga akan melakukan proses penambahan 
nilai pada Score sebesar 10 poin ke dalam Text Score dan Jumlah Score akan 
muncul pada tampilan Layout. 


0 O * 

Home View Events 
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B Effects 
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Project Proper... View 
More informat... Help 


Game 

ESGame 

game 
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Global number VarNyawa = 5 
Global number VarScore - 0 
System On start of layout 


▼ Projects i? x 

a G w New project* 


[jj score Set text to 'Score = ' i 

[Tj nyawa Set text to 'Nyawa = 


Double-dick an object to create a condition ffom: 



sheets 

Game 

ttypes 

:kground 

dakan 

eteor 


[1 Objects Tilemap 



Approx. download: 300 kb memory use: 6.1 mb Events: 3 


Active layer: game 


Mouse: (-56.0, -10.0,0) 
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Construct 2 - ESGame 
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Active layer game 
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S Effects 
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Triggered when the object collides with another object. 
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^*jOn collision with another object 


" its 
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j Cancel 


Help on 'Sprite' conditions 


[ Back | | Next 


Objects Tilemap 


Approx. download: 300 kb memory use: 6.1 mb Events: 3 


Active layer game 


Mouse: (-56.0, -10.0,0) 


Gambar di atas menjelaskan tentang proses memasukkan logika pesawat 
menabrak obyek lain (On Collision With Another Object), kemudian kita akan 
di berikan pilihan untuk memilih obyek mana yang akan di tabrak. Dalam hal 
ini kita akan memilih obyek meteor seperti tampilan gambar di bawah ini. 



Jika obyek sudah terpilih, lanjutkan dengan menekan tombol Done. 
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Approx. download: 300 kb memory use: 6.1 mb Events: 3 


Active layen game 


Mouse: (-56.0, -10.0,0) 


Setelah kita memasukkan logika Event sekarang waktunya kita untuk 
memasukkan logika Action. Logika Action adalah logikan yang akan terjadi 
ketika kita melakukan aksi di Event. Aksi yang kita lakukan adalah pesawat 
menabrak meteor, kemudian aksi apa yang akan kita berikan? 


Dalam game ini, yang pertama kita akan memberikan aksi meteor akan 
hancur (destroy). 
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Double-dick an object to create an action ffom: 
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j Approx. download: 300 kb memory use: 6.1 mb Events: 4 


Mouse: (-56.0, -10.0,0) 
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Approx. download: 300 kb memory use: 6.1 mb Events: 4 


Active layer: game 


Mouse: (-56.0, -10.0,0) 


Setelah kita memberikan efek destroy pada meteor, selanjutnya kita akan 
memasukkan logika aksi berikutnya, yaitu ledakan akan menempati posisi 
dari meteor (set position to another object). 
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Ready Approx. download: 300 kb memory use: 6.1 mb Events: 4 Active layer: game Mouse: (-560, -100,0) Zoom: 100% 


Setelah kita berhasil menempatkan obyek ledakan pada posisi meteor, 
selanjutnya kita akan menempatkan memberikan aksi lainnya lagi yaitu 
menyuruh System untuk menunggu selama 1 detik dan kita akan 
menempatkan obyek ledakan ke posisi semula. 
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| Approx. download: 300 kb memory use: 6.1 mb Events: 4 Active layer: game Mouse: 1-56.0, -10.0,0) Zoom: II 
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Approx. download: 300 kb memory use: 6.1 mb Events: 4 
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Setelah itu kita copy terlebih dahulu koordinat dari posisi ledakan untuk 
nanti kita masukkan ke dalam koordinat x dan y dalam EventSheet. 
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Construct2 - Game 


mr-m Home 

View 

Events 

§*, Xcut 

(T' Undo - 

§ Delete 

1 [ftcopy 

** Redo - 

lift Select All 



i Select None 

Clipboard | 

Undo 

| Selection | 


X Active configurations: All 




Forums 
_ Scirra 

^ Help store 

Online 


Run Debug Export Start 

layout layout project Page 

Preview Go 


Properties 

'i Z i 


Object type properties 

Name ledakan 

Plugin Sprite 

UID 9 

Global No 

Common 

Layer game 

Angle 0 

Opacitv _ 100 


| Position 

-112,128 

1 

Size 

203.668,18... 


Instance variables 


Add / edit 

Behaviors 

Instance va... 


Add/edit 

Effects 

Behaviors 


Blend mode 

Normal 


Add / edit 

Container 

Effects 


No contai... 

Properties 

Create 


Animations 

Edit 


Size 

Make 1:1 


Tnitial visih... 

Visihlp 

T 


The co-ordinates in the layout 
wherethis object instance is 


| Approx. download: 300 kb memory use: 6.1 mb Events: 4 


Active layer: game 


New project* 

Eir Layouts 
■ Game 
Sr Event sheets 
(H| ESGame 
fa Objecttypes 
| background 
• ledakan 
fa meteor 
[Tj nyawa 
< pesawat 
[t] score 
Families 



Mouse: (-164.0,255.0,0) Zoom: 100% 


Pada tampilan gambar di bawah ini, kita akan membuat aksi untuk 
mengatur ledakan kembali pada posisi semula. 
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& bo -^-oF 

|j0E£S9l^ Home | View 
Cut lOUndo- 

l?*l Cod 


Construct 2 - ESGame 


Paste 

Clipboard 


Redo » 

\r2\ Select All 

: • Select None 

| Undo 

Selection 


^ Active configurations: Ali 
^Displaying: HTML5 




^ Forums 
^ Scirra 

©Help store 


Run Debug Export Start 

layout layout project Page 

Preview Go 


Properties < 

:i Si 

B Object type properties 


ledakan 


-112,128 
203.668,18.. 


UID 
Global 

B Common 

Opacity 
IB Position 
IB Size 
S Instance variables 

Add/edit Instance va... 
B Behaviors 

Add / edit Behaviors 
B Effects 

Blend mode Normal 
Add / edit Effects 
B Container 

No contai... Create 
B Properties 

Animations Edit 
Size Makelil 

Tnitial visih... Visihle 


Position 

The co-ordinates in the layout 
wherethis object instance is 


Game/ ’ ESGame 


yjy Global number VarNyawa = 5 
© Global number VarScore = 0 
1 ■►©System On start of layout 


^ pesawat On collision with d 


[t j score Set text to 'Score = ’ 

[Tj nyawa Set text to "Nyawa 

d meteor Destroy 

• ledakan Set position to ^ ■ 

© System Wait 1.0 seconds 

Add action 


Set the objecfs X and Y co-ordinates at the same time. 



“^its 

ime 

sheets 

types 

ickground 

iakan 


^^Objects | Tllemap 



| Approx, download: 300 kb memory use: 6.1 mb Events: 4_Active layer: game 


Mouse: (186.0, -14.0,0) Zoom: 100% 
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Ready j Approx. download: 300 kb memory use: 6.1 mb Events: 4 Active layer: game Mouse; (-13.0, -14.0,0) Zoom: 100% 


Letakkan hasil copyan koordinat yang tadi sudah kita simpan pada bagian x 
dan y seperti tampilan gambar di atas. 

Selanjutnya kita akan membuat aksi untuk membuat system 
menghitung pertambahan poin sebesar 10 poin pada Score. 


B*'-'* 

Home View Events 
X Cut ir'Undo’ jjjj Delete 


Construct 2 - ESGame 


fc 


^ Active configurations: A 


Redo » 

IjfiiSelect Ali 

: i Select None 

| Undo 

Selection | 


S;::r 

_ Scirra Run Debug Export Start 

O Help store layout layout project Page 

Online Preview Go 
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# s ** ^ 

Home View 

Events 



Construct 2- ESGame 


e O 

S I® 

1 

a -o S 

ir> Undo - 

Redo - 

Undo 

§ Delete 

\w2\ Select All 

: i Select None 

Selection 

X Active configurations: All » 

%.Displaymq: HTML5 

Configurations 

Scirra.com 

Forums 

_ Scirra 

V&f Help Store 

Online 

O&S 

Run Debug Export 
layout layout project 
Preview 

W 

Start 

Go | 


Properties 

d > 

c ■' Game/' 

ESGame x 





Projects d X 


*= zl 

B Object type properties 


Name 

Plugin 

UID 

Global 

B Common 
Layer 
Angle 
Opacity 

E) Position 


ledakan 

Sprite 


100 


112,128 
E) Size 203.668,18... 

B Instance variables 

Add / edit Instance va... 

B Behaviors 

Add / edit Behaviors 
B Effects 

Blend mode Normal 
Add / edit Effects 
B Container 

No contai... Create 
B Properties 

Animations Edit 
Size Makelil 

Tnitial visih... Visihlp 

Position 

The co-ordinates in the layout 
where this object instance is 


Global number VarNyawa = 5 
<4jj) Global number VarScore = 0 
System On start of layout 


iT j nyawa 

41 meteor 
O ledakan 
^System 
O ledakan 
Add action 


Set text to 'Score = ' l 
Settextto *Nyawa = 

Destroy 

Set position to ^ m 
Wait LO seconds 
Set position to (-112, 


Add to the value of a global or local variable. 


Display 

^Set canvas size 
{Q|Set pixel rounding 

General 

£ Create object 
$Goto layout (by name) 
^Restart layout 
{jjSortZ order 

Global & local variables 

| yf>Add to | 

Set value' 


^QjSet fullscreen scaling 
^Snapshot canvas 


{|Goto layout 
£go to next/previous layout 
jjjSetgroup active 
^yjstop loop 


^jReset global variables 
^jiSubtract from 


Layers 8t Layout 
j^Recreate ini bal objects 
$Set layer angle 
Set layer blend mode 
fx Set layer effect parameter 
^JSet layer opacity 


^jReset persisted objects 
lJ|Set layer background color 
f* Set layer effect enabled 
^j|Set layer force own texture 
^Set layer parallax 


Help on 'System' achons 


sheets 

Game 

ttypes 

ckground 

dakan 


P Objects Tilemap 



Ready 


I Approx. download: 300 kb memory use: 6.1 mb Events: 4 


Active layer: game 


Mouse: (-13.0, -14.0,0) 


% B ^ Q & ; 


Cb : erb v.'"th e> r r e;: 


Construct 2 - ESGame 


Home View 

Events 


* Cut 

I 55 Copy 
Paste 

Undo - 

H Delete 

X Active configurations:! 

'H Redo * 

ir2; Select All 

: i Select None 

^Displaying HTML5 

Clipboard 

Undo 

Selection 

Configuratiorj: 


Properties 

B Object type properties 


P X 


Name 

Plugin 

UID 

Global 

B Common 
Layer 
Angle 
Opacity 

El Position 


ledakan 

Sprite 


100 


112,128 
E) Size 203.668,18... 

B Instance variables 

Add / edit Instance va... 

B Behaviors 

Add / edit Behaviors 
B Effects 

Blend mode Normal 
Add / edit Effects 
B Container 

No contai... Create 
B Properties 

Animations Edit 
Size Make 1:1 

Tnitial vkih— Visihlp 

Position 

The co-ordinates in the layout 
where this object instance is 


me x | 


Sjjf Global number VarNyawa 
$ Global number VarScore - 
^ £ System On start of layc. 


^System 
-* pesav 


■ sfifnai cm cr* 


Forums 
>He'P Store 
Online 


I Tj score Set text to 'Score = ' & VarScore 


[t] nyawa Set text to "Nyawa = * & VarNyawa 


Destroy 

Set position to 4) meteor (image point O) 

Wait LO seconds 

Set position to (-112, 1280) 


41 meteor 
% ledakan 
0 System 
Cl ledakan 

Add actior Parameters for System: Add to 



□ 1 ® ' S3_| 

e & 


a Ejf New project* 

a f^r Layouts 
U Game 
a \m Event sheets 
IIH ESGame 
a Ejr Object types 
| background 
O ledakan 
^ meteor 
[t] nyawa 
cL pesawat 

to Families _ 


t', Projects Layers 

I All 'Game' objects 

HH background 
Q ledakan 
^ meteor 
T i nyawa 
s i / pesawat 
T i score 


Objects Tilemap 


m 


| Approx. download: 300 kb memory use: 6.1 mb Events: 4 


Active layer: game 


Mouse: (-13.0, -14.0,0) 


Pada bagian ini kita telah berhasil untuk menambahkan poin pada Score 
dan jangan lupa untuk memasukkan Score ke dalam Text Score seperti 
gambar di bawah ini. 



SA6USAGAME 

Satu Guru Satu Game Edukasi 


Halaman 116 


HiUII 

































































































Events 


6 


B ^ ^ 

Home 

X Cut 


Construct 2 - ESGame 


View 


Clipboard 


■T' Undo - ® Delete 

^ Active configurations: All 

^ Scirra.com 

§ 

'Tt Redo ’ iiffj Select Ali 

^Displaying: HTML5 

^ Forums 

: iSelectNone 


^ Help 

Store 

Undo Selection 

Configurations 

Online 

1 


£ O&B A 

Run Debug Export Start 

layout layout project Page 

Preview Go 


Properties 

•= Al 

*= zi 

B Layout properties 
Name Game 

Event sheet ESGame 
Active layer game 
Unbounde... No 
B Layout Size 1000, 500 
B Margins 500, 500 
B Effects 

Add / edit Effects 
Project Proper... View 
More informat... Help 


Global number VarNyawa = 5 



d fjj New project* 

a Layouts 


** 

njy Global number VarScore = 0 



IHT Game 



1 System On start of layout 

Lljscore 

Set text to 'Score = ' & VarScore 

a Event sheets 




[Tj nyawa 

Set text to ’ Nyawa = * & VarNyawa 

IH ESGame 






d Su Objecttypes 






| background 



2 pesawat On collision with 

A meteor 

Destroy 

O ledakan 



meteor 

d ledakan 

Set position to ^ meteor (image point Q) 

meteor 




System 

Wait LO seconds 

|| musuh 




ledakan 

Set position to [-112,1280) 

[Tj nyawa 




Q System 

Add 10 to VarScore 

i > pesawat 
[t] score 


- 


[T j score 

Set text to "Score = ' & VarScore 

tj Projects Layers 






Objects 

a 

X 




All 'Game' objects 

m 




background 


■* 




ledakan 






meteor 






musuh 






! T i nyawa 






vAv Pesawat 


,, 




1 Objects I Tilemap 


Approx. download: 300 kb memory use: 6.2 mb Events: 4 


Mouse: (51.0, -11.0,0) 


Selanjutnya kita akan melakukan proses pengurangan nyawa sebesar 1 poin 
setiap kali pesawat menabrak pesawat musuh. Pada dasarnya prosesnya 
sama dengan pada saat kita menambahkan poin pada Score yang menjadi 
pembedanya adalah pada bagian Action System tidak lagi menggunakan Add 
To tetapi menggunakan Substroct From. Dan sekarang jalankan Game yang 
sudah anda buat, jika semua proses berjalan benar, maka anda akan 
mendapatkan tampilan Game seperti berikut ini. 



Dari gambar di atas dapat kita lihat bahwa Score sudah bertambah menjadi 
30 poin dan Nyawa juga sudah berkurang menjadi 3 poin. 
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Export Construct 2 Menjadi APK Android 

11.1 Software yang digunakan 

Dalam tutorial kali ini akan belajar bagaimana cara mengekspor game yang 
telah kita buat di Construct 2 ke Android. Disini kita akan fokus bagaimana 
cara mengekspor project Construct 2 hingga akhirnya menjadi APK yang 
nantinya bisa kita upload di Google Playstore. 

Adapun Software yang digunakan di antaranya adalah : 

A. XDK 

Dikarenakan Intel XDK akan pensiun, tutorial build apk pada halaman 
ini mungkin tidak akan bekerja semestinya, kita bisa mencoba alternatif 
cloud build lain dan penulis akan menggunakan aplikasi yang kedua 
yaitu Website 2 APK Builder. 

B. Website 2 APK Builder 

Keunggulan menggunakan website 2 APK Builder diantaranya adalah : 

■S Easy to Use 

Sangat mudah digunakan 
■S No Coding Required 

Tidak perlu belajar coding, proses yang lengkap otomatis, tinggal 
klik saja. 

■S Google Play Compatible 

Aplikasi yang dibuat kompatibel sesuai saran Pengembang Google 
Play, Anda dapat mempublikasikannya di Go. 

•S Can Work Offline 

dapat membuat aplikasi kerja Offline menggunakan file HTML, 
tidak ada konektivitas internet yang diperlukan. Jadi bisa dijalankan 
dalam keadaan offline. 

11.2 Tahapan-Tahapan Eksport Contruct 2 Menjadi APK 
A. Eksport Project 

Cara export file contruct2 sebagai berikut: 

1. Masuk contruct2 buka file yang akan dirubah ke APK. 

2. Terus export file 
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j ^ New 

Recent Projects 

1 Racing Game Matematika.capx 


Operi 

2 Racing Game Matematika.capx 

3 Racing Game Math.caproj 

_ 

p| Save 

4 Racing Game Math.caproj 

5 Mari Belajar Huruf Hijaiyah V.01.capx 


Save As Proiect... 

6 Tanya Jawab.caps 

7 Driving Game Win8.capx 


Save As Single File... 

8 E:\5AG U S AG AM E\.. .\5 h o ot e r. ca px 

9 GAMEl.caproj 


j ^ Export project... 

10 Super G Storm 1104v002.capx 


2^ Close tab 

Close project 



^Store Q Help Q About @ Preferences 

0Exit 


3. Lalu pilih HTML5 website 



4. Lalu pilih folder lebih aman buat folder baru khusus untuk export 
filenya. Karena nanti folder ini yang akan dijadikan sumber di APK 
builder ketika akan merubah ke dalam bentuk APK. 
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B. Build Project 

1. Setelah proses export selesai masuk buka website 2 APK builder 


v l«=4 


, Website 2 APK Builder Pro 3.1 (Unregistered) 


File Build Mode Activation Help&Support Keystore & Signing About Checkfor Updates 

WEBJITE S RPK BUILDER 

Transform your site to an ondroid Qpp 

Splash Preview 


Project Meta Data 

1 


Website type to Convert | (0) Local HTML Website 

0 Web URL 

Application Title j 

Game Radng Matematika 

2 1 

Package Name: 

com ^ . goyal ^ 

website2apk 

Version Name: 

1.0 ^ Version Code: 


App Orientation: 

(a) Auto-Rotate © Portrait © Landscape 

Output Directory: 

C:\Users\Administrator\Desktop 3 

| Change... ] 

App Startup Page: 

(0) index.html © index.htm 


About Dialog Text 

App Created via Website 2 APK Builder 

App Share Text 

Hi there, Give this app a try. 


App Exit Mode 

(0' Double Press Back © When Last Page Ooses 

Custom Error Page 

i: (0) Default © Custom 

. 3[ 

Splash Screen: 

'0 Default 1 1 Blank <1 Custom 

3 L 


Racing Game 
Matematika 


Change Icon 


Customize 

Permissions 




Cache Mode 
© No Cache 
(0) Default 
© Highly Cached 



Loading... 


Duration: 1500 
Progress Wheel 

r\ [bolipop 


Extras 

□ App Title Bar 
[V] SupportZoom 
E Zoom Buttons 
O Side ScrollBans 
[V] Text Selection 
[7] Save Form Data 
[V] Long Gckable 
E UseWideView 
E Enable Flash 
[V] Full Screen 
E OverView Mode 
[V] Allow Ertemal URLs 
E Confiim on Bdt 
E Enable GPS Prompt 


Location: Centre 


Directory ofLocal Website: 4 |cj\Usere^AjministratorTictu^^ 


^ Google pla^ 


AdMob Monetization 
©' Enable (0) Disable 


Configure 


Push Notifications 


© Enable (O) Disable Configure 


GENERATE APK 


Pilih seperti pada gambar 

Aplikasi title : Nama game untuk APK 

Output directory : folder tempat hasil dari APK 

Directory of local website : folder tempat export contruct2 
Change icon : icon untuk game di APK 

terakhir pilih generate APK dan tunggu prosesnya sampai selesai. 
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2. Setelah selesai file berada pada output directory yang telah kita 
buat pada langkah di atas tinggal kopi dan di instali di androidnya, 
dan jika ingin mempublikasikan harus sign in keystore dulu. 

C. Sign in Keystore 

Setelah APK dibuat/di release, langkah selanjutnya adalah men-sign in 
APK tersebut dengan Keystore. Oh iya, sebenarnya kita juga bisa 
langsung men-sign in APK yang kita buat pada saat proses build. 

APK Signer? 

APK Signer merupakan Software yang cukup powerful, karena selain 
bisa digunakan untuk men-sign in keystore, aplikasi ini juga bisa 
membuat keystore, sebagai apk alignment dan juga bisa melihat detail 
keystore seperti siapa saja owner yang terdaftar pada suatu file 
keystore, melihat fingerprint md5,sha-l,sha-256 dll. 

Selain itu aplikasi ini sangat ringan, ukurannya kurang dari 1MB! 

Cara Pakai 

Karena aplikasi ini bersifat portable, jadi kita tidak perlu melalukan 
instalasi terlebih dahulu. Cukup Double Klik saja kita sudah bisa 
menggunakan aplikasi ini. 
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Cara Membuka FileJAR. 

Berikut merupakan tampilan awal aplikasi APK Signer 


* apk-signer (1.8.5) 

File Help Language 
r (For Windows users) JDK Patri 


Key Generator signer APK Alignment Key Tools 
Target file - 


r First and Last name - 


rOrgamzation - 


r State or Province - 


[Saveas ] Generate Keyfile 
rConfirm- 


Alias password- 


f) 


i*i 


rOrganizational Unit 


rCityor Locality- 


rCountry code(XX) - 


Sebelum kita bisa menggunakan fitur-fitur yang ada pada aplikasi ini, 
terlebih dulu kita harus mengatur lokasi JDK. Cukup tekan 
tombol Choose lalu pilih lokasi dimana kamu menginstali JDK. 


♦ apk-signer (1.8.5) — □ X 

F-ile Help Language 

, (For Windows users; JDK Path. 

C \Program Fiies\Java\|dki S0_:0 om 

Key Generator a p K Al grme-it KeW.oL 


I Choose 

I I 


Target file: - 

[ Save as ] Generate Keyfile 



Setelah lokasi JDK telah diatur kita bisa menggunakan fitur-fitur yang 
ada. Apa saja sih fiturnya? 
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Membuat Keystore 


1. Klik Save As lalu tentukan nama file Keystore yang kamu inginkan 
dan tentukan juga dimana kamu mau menyimpan file tersebut 

2. Isi kolom Password, harus sama dengan kolom Confirm 
Password. Password ini merupakan password untuk Keystore. 

3. Isi kolom Alias, 1 file keystore dapat terdiri lebih dari 1 alias 

4. Isi kolom Alias password, boleh sama dengan password 
sebelumnya, tidak sama pun tidak apa. 

5. Validity isi 25 saja 

6. First and Last name, Organizational unit, Organization diisi sesuai 

7. City or Locality diisi sesuai kota dimana kamu tinggal 

8. State or Province diisi dengan propinsi dimana kamu tinggal 

9. Country Code diisi ID 


Sign in APK 


♦ apk-signer (1.8.5) — □ X 

File Help Language 



Sign' 


1. Klik Load Keyfile lalu pilih file keystore yang akan kamu gunakan 

2. Masukkan Password Keystore 

3. Jika password keystore yang kamu masukkan benar, 
maka Alias akan muncul secara otomatis 

4. Masukkan Alias Password 

5. Pilih APK yang akan si Sign in 

6. Klik Sign 

7. Hasil APK akan masuk di lokasi yang sama dengan APK yang tadi 
kamu pilih 
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* apk-signer (1.8.5) 

File Help Language 

r (For Windows users) JDK Path:- 

Ic AProgram Files\Java\)dk18 0_20\bin 


Key Generator 


APK Alignment KeyTools 


RilendrimKeystore keystore 


jagittn mulyanto [v 


rAliaspassword 


juragansampah_UNSIGNED apk 


Sign' 


APK Alignment 


♦ apk-signer (1.8.5) — □ X 

File Help Language 

f (For Windows users) JDK Path:- 1 



Hampir sama dengan langkah-langkah sebelumnya, namun ini lebih 
simple. Fitur APK Alignment digunakan setelah APK sudah di Sign in. 
Langkah-langkahnya : 

1. Klik Load APK File lalu pilih file APK yang akan di align 

2. Klik Align 

3. Selesai! 
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PENUTUP 


Sebagai penutup, penulis menyampaikan pesan umum mari kita buat inovasi 
untuk pendidikan Indonesia dengan model pembelajaran yang bervariatif salah 
satunya adalah menyentuh peserta didik dengan game Edukasi. 

Tentu saja ada pro dan kontra terhadap penerapan game untuk dunia 
pendidikan, atau yang lebih dikenal dengan sebutan game edukasi. Game 
mampu membuat pemainnya kecanduan, jika sudah asyik didepan komputer 
jadi lupa waktu, lupa belajar. Ada pula game yang justru mengajarkan kekerasan, 
sehingga dikhawatirkan berpengaruh buruk terhadap perkembangan mental 
anak. Namun disisi lain, lewat game pula pemainnya dapat belajar banyak hal, 
sportivitas, semangat pantang menyerah, beradu strategi. 
Jadi, game yang seperti apa yang bagus untuk diterapkan dalam dunia 
pendidikan? Berikut ini beberapa karakteristik game untuk pembelajaran : 

1. Ada tantangan dan penyesuaian : tersedia tantangan yang semakin 
kompleks, siswa dapat menyesuaikan tingkat kesulitan jika diperlukan. 
Dalam game terdapat level- level, makin tinggi levelnya maka tingkat 
kesulitannya juga makin tinggi. 

2. Menarik dan mengasyikkan : game mampu membuat siswa asyik dalam 
sebuah aktifitas yang mereka pahami tujuannya serta berkaitan dengan 
pencapaian kompetensi mereka. 

3. Tidak menggurui dan berdasar pada pengalaman : siswa tidak harus dilatih 
terlebih dahulu untuk memainkan game, biarkan siswa langsung mencoba 
bermain, mereka mungkin akan kalah atau gagal, lalu mengulang dan 
memperbarui strategi dalam bermain 

4. Interakatif : Siswa berinteraksi dengan cara menanggung akibat dari tindakan 
yang mereka lakukan dan dengan melihat pengaruhnya terhadap game yang 
dimainkannya. 

5. Umpan balik : Siswa dapat menarik kesimpulan dari umpan balik yang 
diberikan tentang bagaimana tindakan mereka dapat menimbulkan efek 
tertentu 

6. Sosial dan kerja sama : game harus dapat meningkatkan dialog serta 
pertukaran pendapat dan pengetahuan diantara para pemain 

7. Keahlian : Semua siswa dalam satu kelas tidak diasumsikan memiliki 
kemampuan yang sama, ada beberapa siswa yang dijadikan asisten untuk 
membantu siswa lainnya menjelaskan tentang game dan bagaimana cara 
memainkannya. 

8. Perenungan : siswa harus diberikan kesempatan untuk mengevaluasi kinerja 
mereka dan apa yang mereka pelajari dari memainkan sebuah game, 
misalnya kenapa mereka gagal/kalah dan bagaimana cara mengatasinya agar 
tak terulang lagi. 
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Tentunya tidak mudah membuat game yang isinya berhubungan dengan materi 
pelajaran disekolah. Namun bukan hal yang mustahil pula untuk dilakukan. 
Maraknya penyelenggaraan kontes game edukasi, yang diikuti oleh mahasiswa 
maupun siswa SMK, membuktikan mulai diterimanya penggunaan game dalam 
dunia pendidikan. Jadi, jika anak/adik anda ada yang merasa kesulitan 
mempelajari suatu topik pelajarannya disekolah hingga anda hilang kesabaran 
lagi untuk mengajarinya, tak ada salahnya anda browsing tentang topik itu, siapa 
tahu anda akan menemukan game yang berhubungan dengan topik tersebut. 
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DAFTAR PUSTAKA 


Pelda (pelatihan online) Game Edukasi < http://mooc.seamolec.org/ > 
How to Convert into APK < https://www.scirra.com/forum/ > 

Garasi Edugame Ponorogo < https://edugameponorogo.blogspot.co.id > 
Cara export Contruct 2 menjadi APK android < https://blog.agittm.id > 
Contruct 2 Trivia < https://social.msdn.microsoft.com > 

Beginner's guide to Construct 2 < https://www.scirra.com > 
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BIODATA PENULIS 


Nama 

: MOKHAMMAD RIDOI, S.Si 

Instansi Mengajar 

: SMP Sunan Ampel Pagelaran Malang 

Mata Pelajaran 

: Matematika 

Email 

: mokhammadridoi@gmail.com 


Berbagai aktivitas yang telah dilakukan antara lain mendirikan South of Malang 
Adventure Technic pada tahun 2007, mengikuti wanna be trainer pada tahun 
2011 di Bogor dan aktif mengikuti kegiatan yang dilakukan oleh SEAMEO 
SEAMOLEC yang merupakan sebuah institusi yang bernaung dibawah Southeast 
Asian Ministers of Education Organization (SEAMEO) atau Organisasi Menteri- 
Menteri Pendidikan se Asia Tenggara yang bertanggung jawab untuk 
mengembangkan Pendidikan Terbuka dan Pendidikan Jarak Jauh di Asia 
Tenggara. SEAMOLEC berpusat di Indonesia dan bekerjsama dengan Departemen 
Pendidikan Nasional, khususnya institusi yang menyelenggarakan PJJ maupun 
institusai pendukung program. 
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